<template>
  <div class="cur-main-nav">
    <!-- :span="!!curRoomData.roomId ? 16 : 24" -->
    <div>
      <div>
        <div class="cur-main-box left">
          <div class="seach-fixed">
            <div class="seach-nav">
              <div class="topBox">
                <div class="roomManger">
                  <div class="roomTop">
                    <div>
                      <span>房态：</span>
                      <el-radio-group
                        class="radiobtns"
                        v-model="queryParams.roomStatus"
                        size="mini"
                      >
                        <el-radio-button label="" class="radiobtns">
                          <div class="allbtn">全部({{ total }})</div>
                        </el-radio-button>

                        <el-radio-button
                          :class="
                            item.id === '0'
                              ? 'gray'
                              : item.id === '1'
                              ? 'error'
                              : item.id === '2'
                              ? 'gray'
                              : item.id === '3'
                              ? 'gray'
                              : item.id === '4'
                              ? 'warn'
                              : ''
                          "
                          :label="item.id"
                          v-for="(item, index) in statusTotal"
                          :key="index"
                        >
                          <div class="emptybtn">
                            {{ item.name }}({{ item.count }})
                          </div>
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="floor">
                      <span>楼层：</span>
                      <el-radio-group
                        class="radiobtns"
                        v-model="queryParams.floorId"
                        size="mini"
                      >
                        <el-radio-button label="" class="radiobtns">
                          <div class="allbtn">全部({{ total }})</div>
                        </el-radio-button>
                        <el-radio-button
                          class="gray"
                          :label="ite.id"
                          v-for="(ite, inde) in floorTotal"
                          :key="inde"
                        >
                          <div class="emptybtn">
                            {{ ite.name }}层({{ ite.count }})
                          </div>
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                  <div class="roomBottom">
                    <div class="roomsStatus">
                      <span>类型：</span>
                      <el-radio-group
                        class="radiobtns"
                        v-model="queryParams.typeId"
                        size="mini"
                      >
                        <el-radio-button label="" class="radiobtns">
                          <div class="allbtn">全部({{ total }})</div>
                        </el-radio-button>
                        <el-radio-button
                          :label="it.id"
                          v-for="(it, int) in typeTotal"
                          :key="int"
                          class="gray"
                        >
                          <div class="emptybtn">
                            {{ it.name }}({{ it.count }})
                          </div>
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="roomsBeds">
                      <span>床位：</span>
                      <el-radio-group
                        class="radiobtns"
                        v-model="queryParams.bedsId"
                        size="mini"
                      >
                        <el-radio-button label="" class="radiobtns">
                          <div class="allbtn">全部({{ total }})</div>
                        </el-radio-button>
                        <el-radio-button
                          class="gray"
                          :label="its.id"
                          v-for="(its, intd) in bedsTotal"
                          :key="intd"
                        >
                          <div class="emptybtn">
                            {{ its.name }}({{ its.count }})
                          </div>
                        </el-radio-button>
                      </el-radio-group>
                    </div>
                  </div>
                </div>

                <div class="actionBtn">
                  <div @click="mergeRoomMorCItrem">
                    <img src="../../../assets/logo/contenctRoom.png" alt="" />
                    <div>房间联房-</div>
                  </div>
                  <div @click="RoomTransfer">
                    <img src="../../../assets/logo/Transfer.png" alt="" />
                    <div>房间转账*</div>
                  </div>
                  <div @click="addCardOpen">
                    <img src="../../../assets/logo/cardRearge.png" alt="" />
                    <div>办卡充值+</div>
                  </div>
                  <!-- <div>
                    <img src="../../../assets/logo/bill.png" alt="" />
                    <div>待收账单</div>
                  </div> -->
                </div>

                <!-- <div class="btn_right">
                  <button class="btn1" @click="handleQuery">筛选</button>
                  <button class="btn2" @click="resetQuery">重置</button>
                </div> -->
              </div>
            </div>
          </div>

          <div class="left-nav-center">
            <div class="room-list">
              <div v-for="item in roomList" :key="item.id">
                <div
                  class="room-item"
                  @click="pickRoomItem(item)"
                  :class="
                    item.roomStatus === 1
                      ? 'ServerActive'
                      : item.roomStatus === 2
                      ? 'clean'
                      : item.roomStatus === 3
                      ? 'clean'
                      : item.roomStatus === 4
                      ? 'helper'
                      : ''
                  "
                >
                  <div class="icons">
                    <div class="room-name">
                      {{ item.name }}
                    </div>
                    <!-- <div>{{ item.roomConfigList }}</div> -->
                    <div class="img_iconBoxs">
                      <div
                        class="img_icon"
                        v-for="(it, inde) in item.roomConfigList"
                        :key="inde"
                      >
                        <img :src="it.imageUrl" alt="" />
                      </div>
                    </div>
                  </div>
                  <div>
                    {{
                      !!item.roomNameMergeStr
                        ? "(" + item.roomNameMergeStr + ")"
                        : ""
                    }}
                  </div>
                  <div class="room-tag">
                    {{ !!item.floor ? item.floor + "层 ·" : "" }}
                    {{ item.typeName }} · 床位{{ item.beds }}位
                  </div>
                  <div class="countNum">{{ item.beds }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 水平线 -->
          <div class="scheduling">
            <div class="scheduling-area"></div>
          </div>

          <!-- 技师信息 -->
          <div class="actshift">
            <div class="teachicaTitle">技师信息</div>
            <div>
              <el-button type="primary" class="actionsBtn" @click="TurnShift"
                >轮过</el-button
              >
            </div>
          </div>

          <div class="teachicanInfo" v-loading="ShiftLoopLoading">
            <div
              class="teachbox"
              v-for="(item, index) in ShiftLoops"
              :key="index"
            >
               <draggable
                class="teachbox_list"
                :sort="!!item.loop && item.loop.length > 1 ? true : false"
                v-model="item.loop"
                draggable=".item"
                @end="onEnd(item.loop)"
              >
                <div
                  class="item teachbox_item"
                  v-for="(items, indexs) in item.loop"
                  :key="indexs"
                >
                  <div class="descInfo">
                    <div>
                      <img :src="items.avatar" alt="" v-if="!!items.avatar" />
                      <img src="../../../assets/logo/1.jpg" alt="" v-else />
                    </div>
                    <div
                      :class="
                        items.userStatus === 0
                          ? 'userStatus upWork'
                          : items.userStatus === 1
                          ? 'userStatus'
                          : ''
                      "
                    >
                      {{ userStatusObj[items.userStatus] }}
                    </div>
                  </div>
                  <div class="userName">
                    {{ items.userName }}-{{ items.shiftName }}
                  </div>
                </div>
              </draggable>
            </div>
          </div>

          <!-- 轮过 -->
          <div>
            <el-dialog
              title="轮过"
              :visible.sync="TurndialogVisible"
              width="30%"
              :before-close="TurnhandleClose"
            >
              <span>
                <el-form
                  :model="TurnRuleForm"
                  :rules="TurnRules"
                  ref="TurnRuleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="轮过技师" prop="userId">
                    <el-select
                      class="w-100"
                      v-model="TurnRuleForm.userId"
                      placeholder="请选择轮过技师"
                    >
                      <el-option
                        v-for="item in loopList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="TurnhandleClose">取 消</el-button>
                <el-button type="primary" @click="SureShift">确 定</el-button>
              </span>
            </el-dialog>
          </div>

          <div class="actionBoxs">
            <!-- <div class="roomState">
              <span>状态：</span>
              <el-radio-group class="radiobtns" v-model="radio4" size="mini">
                <el-radio-button class="radiobtns" label="20">
                  <div class="allbtn">全部(1)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="21">
                  <div class="emptybtn">空闲(1)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="22">
                  <div class="customerbtn">上钟(0)</div></el-radio-button
                >
                <el-radio-button class="gray" label="23">
                  <div class="customerbtn">预约(0)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="24">
                  <div class="customerbtn">停牌(2)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="24">
                  <div class="customerbtn">未报(0)</div>
                </el-radio-button>
              </el-radio-group>
            </div> -->

            <!--  <div class="Timeleft">
              <span>剩时：</span>
              <el-radio-group class="radiobtns" v-model="radio4" size="mini">
                <el-radio-button class="radiobtns" label="40">
                  <div class="allbtn">全部上钟(1)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="41">
                  <div class="emptybtn">15分钟内(1)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="42">
                  <div class="customerbtn">30分钟内(0)</div></el-radio-button
                >
                <el-radio-button class="gray" label="43">
                  <div class="customerbtn">45分钟内(0)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="36">
                  <div class="customerbtn">1小时内(2)</div>
                </el-radio-button>
                <el-radio-button class="gray" label="63">
                  <div class="customerbtn">超一小时(0)</div>
                </el-radio-button>
              </el-radio-group>
            </div> -->

            <div class="workCount">
              <!-- <el-radio-group class="radiobtns" v-model="radio4" size="mini">
                <el-radio-button class="radiobtns" label="27">
                  <div class="allbtn">班次</div>
                </el-radio-button>
                <el-radio-button class="radiobtns" label="28">
                  <div class="allbtn">男女</div>
                </el-radio-button>
              </el-radio-group> -->
            </div>

            <div class="searchBox">
              <!-- <div>
                <input type="text" placeholder="请输入技师工号" /> -->
              <!-- </div> -->
              <!-- <div>
                <el-button class="actionsBtn">查询</el-button>
              </div> -->
              <!-- <div>
                <el-button class="actionsBtn">轮过</el-button>
              </div> -->
              <!-- <div>
                <el-button class="actionsBtn">打卡</el-button>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <el-col :span="0" v-show="!!curRoomData.roomId">
        <div class="cur-main-box" v-loading="roomMsgLoading">
          <div class="right-nav-center">
            <div class="title">基本信息</div>
            <div class="r-n-c">
              <div class="rome-name">
                <span>{{ curRoomData.name || curRoomData.roomName }}</span>
                <div
                  class="rome-status"
                  :class="roomStatusClass[curRoomData.roomStatus]"
                >
                  {{ roomStatusObj[curRoomData.roomStatus] }}
                </div>
              </div>
              <div class="rome-no">
                订单号：{{ !!curRoomData.orderNo ? curRoomData.orderNo : "-" }}
              </div>
              <div class="small-text flex-sp">
                <div>
                  开房时间：{{
                    !!curRoomData.orderOpen ? curRoomData.orderOpen : "-"
                  }}
                  在店时间：{{
                    !!curRoomData.lastTime ? curRoomData.lastTime : "-"
                  }}分钟
                </div>
                <div>
                  客户数：{{
                    !!curRoomData.custCount ? curRoomData.custCount : "-"
                  }}
                </div>
              </div>

              <div class="small-text flex-sp">
                <div>
                  客户信息：{{
                    !!curRoomData.custId ? curRoomData.custName : "暂无客户信息"
                  }}
                  <span
                    class="hover_style2"
                    v-if="
                      (curRoomData.orderStatus === 'O' ||
                        curRoomData.orderStatus === 'W') &&
                      noPay
                    "
                    @click="pickClientOpen"
                    >{{
                      !curRoomData.custId
                        ? "选择客户"
                        : !!curRoomData.custId
                        ? "更改客户"
                        : ""
                    }}</span
                  >
                </div>
              </div>
            </div>

            <div class="rome-shop-list">
              <div
                v-if="
                  !!curRoomData.serverList && curRoomData.serverList.length > 0
                "
              >
                <div class="shop-list-head">服务/商品信息</div>
                <div
                  class="shop-list-item"
                  v-for="(item, index) in curRoomData.serverList"
                  :key="index"
                >
                  <div class="item-head">
                    <el-row>
                      <el-col :span="12"
                        >{{ item.contentName
                        }}{{
                          item.serverCount > 1
                            ? " x" + item.serverCount + " "
                            : ""
                        }}{{ serverStatusObj[item.serverStatus] }}</el-col
                      >
                      <el-col :span="12">{{ item.userName }}</el-col>
                    </el-row>
                    <div class="item-type">
                      <el-tag size="small">
                        {{ clockTypeObj[item.clockType] }}
                      </el-tag>
                    </div>
                  </div>

                  <div class="item-center">
                    <el-row class="row-list">
                      <el-col :span="12"
                        >上钟时间：{{
                          !!item.clockTimeUp ? item.clockTimeUp : "-"
                        }}</el-col
                      >
                      <el-col :span="12"
                        >下钟时间：{{
                          !!item.clockTimeDown ? item.clockTimeDown : "-"
                        }}</el-col
                      >
                    </el-row>
                    <el-row class="row-list">
                      <el-col :span="12"
                        >剩余时间：{{ item.surplusTime }}分钟</el-col
                      >
                    </el-row>
                  </div>

                  <div
                    class="item-bottom"
                    v-if="
                      curRoomData.orderStatus === 'O' ||
                      curRoomData.orderStatus === 'W'
                    "
                  >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="item.serverStatus === 'I'"
                      @click="serveUpDown(item)"
                      >下钟</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="item.serverStatus === 'N'"
                      @click="serveUpDown(item)"
                      >上钟</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="
                        item.serverStatus === 'N' || item.serverStatus === 'I'
                      "
                      @click="serveBack(item)"
                      >退钟</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="item.serverStatus === 'I'"
                      @click="openClientAddItem(item)"
                      >加钟</el-button
                    >

                    <el-button
                      size="mini"
                      type="text"
                      v-if="
                        item.payStatus === 'N' &&
                        item.serverStatus === 'F' &&
                        item.surplusTime !== 0 &&
                        item.surplusTime !== null
                      "
                      @click="serveBackCancel(item)"
                      >撤销下钟</el-button
                    >

                    <el-button
                      size="mini"
                      type="text"
                      v-if="
                        item.serverStatus === 'N' || item.serverStatus === 'I'
                      "
                      @click="changeServeUserOpen(item)"
                      >换技师</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="
                        item.serverStatus === 'N' || item.serverStatus === 'I'
                      "
                      @click="changeServeItemOpen(item)"
                      >换项目</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      v-if="item.serverStatus === 'I'"
                      @click="openPutServeItemTime(item)"
                      >修改时间</el-button
                    >
                  </div>
                </div>

                <div
                  v-if="
                    !!curRoomData.serverList &&
                    curRoomData.serverList.length > 0
                  "
                >
                  <div class="shop-list-head">
                    <el-row>
                      <el-col :span="10">项目/商品</el-col>
                      <el-col :span="4">单价</el-col>
                      <el-col :span="4">数量</el-col>
                      <el-col :span="6">小计</el-col>
                    </el-row>

                    <el-row
                      v-for="(item, index) in curRoomData.serverTotalList"
                      :key="index"
                      class="total-item"
                    >
                      <el-col :span="10"
                        >{{ !!item.contentName ? item.contentName : "-" }}

                        <el-tag
                          size="small"
                          :type="item.contentType === 'P' ? 'danger' : ''"
                          >{{
                            item.contentType === "P"
                              ? "商品"
                              : item.contentType === "I"
                              ? "项目"
                              : ""
                          }}</el-tag
                        >
                      </el-col>
                      <el-col :span="4">￥{{ item.serverPrice }}</el-col>
                      <el-col :span="4">{{ item.serverCount }}</el-col>
                      <el-col :span="6">￥{{ item.serverPriceSum }}</el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>

            <div class="rome-bottom">
              <div
                class="rome-status-but a hover_style"
                @click="openRoom"
                v-if="curRoomData.roomStatus === 0 && !curRoomData.orderNo"
              >
                开房
              </div>

              <!-- <div
                class="rome-status-but b hover_style"
                @click="settleAccountsOpen"
                v-if="curRoomData.roomStatus === 1 && !!curRoomData.orderNo"
              >
                结账
              </div> -->

              <div
                class="rome-status-but b hover_style"
                @click="clickOrderClose"
                v-if="curRoomData.roomStatus === 3 && !!curRoomData.orderNo"
              >
                退房
              </div>

              <div
                class="rome-status-but b hover_style"
                @click="clickOrderSweepm(2)"
                v-if="curRoomData.roomStatus === 2"
              >
                打扫
              </div>

              <div
                class="rome-status-but b hover_style"
                @click="clickOrderSweepm(4)"
                v-if="curRoomData.roomStatus === 4"
              >
                维修
              </div>

              <!-- <div
                class="rome-status-but a hover_style"
                @click="openAdddGood"
                v-if="
                  curRoomData.roomStatus === 1 ||
                  (curRoomData.roomStatus === 3 && !!curRoomData.orderNo)
                "
              >
                新增消费
              </div> -->

              <div
                class="more-op"
                v-if="
                  curRoomData.roomStatus === 1 ||
                  (curRoomData.roomStatus === 3 && !!curRoomData.orderNo)
                "
              >
                <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link hover_style">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">联房</el-dropdown-item>
                    <el-dropdown-item
                      command="b"
                      v-if="curRoomData.splitStatus === 'Y'"
                      >拆房</el-dropdown-item
                    >
                    <el-dropdown-item command="c">换房</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </div>

    <!-- 有客 -->
    <el-dialog
      title="消费明细"
      :visible.sync="RoomChangedialogVisible"
      width="1400px"
      :before-close="ChangehandleClose"
    >
      <span>
        <div>
          <!-- <div class="TeachicanName">技师:</div> -->
          <el-table :data="curRoomData.serverList" border style="width: 100%">
            <el-table-column prop="" label="序号" width="120">
              <template slot-scope="{ $index }">
                <div>
                  {{ $index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="contentName" label="消费项目">
            </el-table-column>
            <el-table-column prop="userName" label="技师号"> </el-table-column>
            <el-table-column prop="sellUserName" label="销售员">
            </el-table-column>
            <el-table-column prop="" label="钟类型">
              <template slot-scope="scope">
                <div>
                  {{ clockTypeObj[scope.row.clockType] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="serverCount" label="数量"> </el-table-column>
            <el-table-column prop="serverPrice" label="单价"> </el-table-column>
            <el-table-column prop="serverPriceSum" label="服务费">
            </el-table-column>
            <el-table-column prop="surplusTime" label="剩余时长">
            </el-table-column>
            <el-table-column prop="createUserName" label="录单人" width="120px">
            </el-table-column>
            <el-table-column prop="createTime" label="录单时间" width="200px">
            </el-table-column>
            <el-table-column prop="payStatusStr" label="是否已结">
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <div
                  class="item-bottom"
                  v-if="
                    (curRoomData.orderStatus === 'O' ||
                      curRoomData.orderStatus === 'W') &&
                    scope.row.contentType === 'I'
                  "
                >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="scope.row.serverStatus === 'I'"
                    @click="serveUpDown(scope.row)"
                    >下钟</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="scope.row.serverStatus === 'N'"
                    @click="serveUpDown(scope.row)"
                    >上钟</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      scope.row.serverStatus === 'N' ||
                      scope.row.serverStatus === 'I'
                    "
                    @click="serveBack(scope.row)"
                    >退钟</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="scope.row.serverStatus === 'I'"
                    @click="openClientAddItem(scope.row)"
                    >加钟</el-button
                  >

                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      scope.row.payStatus === 'N' &&
                      scope.row.serverStatus === 'F' &&
                      scope.row.surplusTime !== 0 &&
                      scope.row.surplusTime !== null
                    "
                    @click="serveBackCancel(scope.row)"
                    >撤销下钟</el-button
                  >

                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      scope.row.serverStatus === 'N' ||
                      scope.row.serverStatus === 'I'
                    "
                    @click="changeServeUserOpen(scope.row)"
                    >换技师</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      scope.row.serverStatus === 'N' ||
                      scope.row.serverStatus === 'I'
                    "
                    @click="changeServeItemOpen(scope.row)"
                    >换项目</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    v-if="scope.row.serverStatus === 'I'"
                    @click="openPutServeItemTime(scope.row)"
                    >修改时间</el-button
                  >
                </div>

                <div>
                  <el-button
                    size="mini"
                    type="text"
                    v-if="
                      (scope.row.serverStatus === 'N' ||
                        scope.row.serverStatus === 'I') &&
                      scope.row.contentType === 'P'
                    "
                    @click="serveBack(scope.row)"
                    >退单</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bottom_desc">
          <div class="bottom_left">
            <div>
              开房时间:{{
                !!curRoomData.orderOpen ? curRoomData.orderOpen : "-"
              }}
            </div>
            <div>
              在店时长：{{
                !!curRoomData.lastTime ? curRoomData.lastTime : "-"
              }}分钟
            </div>
            <div>
              账单金额：￥{{
                !!curRoomData.orderMoney ? curRoomData.orderMoney : "-"
              }}
            </div>
            <div>
              未结帐单：￥{{
                !!curRoomData.moneyWait ? curRoomData.moneyWait : "-"
              }}
            </div>
          </div>

          <div class="bottom_right">
            <el-button
              type="primary"
              @click="settleAccountsOpen"
              v-if="curRoomData.roomStatus === 1 && !!curRoomData.orderNo"
              >结账</el-button
            >
            <el-button
              type="primary"
              @click="clickOrderClose"
              v-if="curRoomData.roomStatus === 3 && !!curRoomData.orderNo"
              >退房</el-button
            >
            <el-button type="primary" @click="changeRoomMorCItrem"
              >换房</el-button
            >
            <el-button
              type="primary"
              @click="openAdddGood"
              v-if="
                curRoomData.roomStatus === 1 ||
                (curRoomData.roomStatus === 3 && !!curRoomData.orderNo)
              "
              >新增消费</el-button
            >
          </div>
        </div>
      </span>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="ChangehandleClose">取 消</el-button>
        <el-button type="primary" @click="RoomChange">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 开房 -->
    <el-dialog
      title="开房"
      :visible.sync="openRoomItemVis"
      width="480px"
      @close="openRoomItemCancle"
    >
      <div>
        <el-form
          :model="openRoomItemObj"
          :rules="openRoomItemRules"
          ref="openRoomItemForm"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-form-item label="待客员工" prop="receiveUserId">
            <el-select
              :loading="storeUserLoading"
              v-model="openRoomItemObj.receiveUserId"
              placeholder="请选择待客员工"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in storeUser"
                :key="item.userId"
                :label="item.nickname"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-for="(domain, index) in openRoomItemObj.domains"
            :label="domain.name + '客户数'"
            :key="domain.roomId"
            :prop="'domains.' + index + '.custCount'"
            :rules="{
              required: true,
              message: '客户数不能为空',
              trigger: 'blur',
            }"
          >
            <el-input-number
              v-model="domain.custCount"
              :precision="0"
              :step="1"
              :min="1"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="进店方式" prop="OrderInStoreType">
            <el-select
              v-model="openRoomItemObj.OrderInStoreType"
              placeholder="请选择进店方式"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in storeWayOptions"
                :key="item.label"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="openRoomItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="openRoomItemLoading"
          @click="openRoomItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!--消费  -->
    <el-dialog
      title="新增消费"
      :visible.sync="addGoodVis"
      width="1300px"
      @close="addGoodCancle"
      class=""
    >
      <div class="add">
        <el-row :gutter="24">
          <el-col :span="16">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="项目消费" name="0">
                <div class="item-list" v-loading="shopItemLoading">
                  <el-row class="item-list-row" :gutter="24">
                    <el-col
                      :span="6"
                      v-for="(item, index) in shopItemArray"
                      :key="index"
                    >
                      <div class="item-xf" @click="itemAddOpen(item)">
                        <div class="item-name">{{ item.itemName }}</div>
                        <div class="item-price">￥{{ item.itemPrice }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="商品消费" name="1">
                <div class="item-list" v-loading="shopProductLoading">
                  <el-row class="item-list-row" :gutter="24">
                    <el-col
                      :span="6"
                      v-for="(item, index) in shopProductArray"
                      :key="index"
                    >
                      <div class="item-xf" @click="goodsAddOpen(item)">
                        <div class="item-name">{{ item.name }}</div>
                        <div class="item-price">￥{{ item.price }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div class="text-left">
                  <pagination
                    :total="shopProductQuery.total"
                    :page.sync="shopProductQuery.pageNo"
                    :limit.sync="shopProductQuery.pageSize"
                    @pagination="getProductAllList"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="8">
            <div class="right-ck-list">
              <div class="el-table">
                <el-table
                  :data="addGoodItem.serverList"
                  :border="false"
                  height="360px"
                >
                  <el-table-column prop="contentName" label="项目">
                  </el-table-column>
                  <el-table-column prop="price" label="单价"> </el-table-column>
                  <el-table-column prop="contentCount" label="数量">
                  </el-table-column>

                  <el-table-column prop="total" label="小计"> </el-table-column>

                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        @click="delServerItem(scope.$index)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div class="right-ck-bootom">
                <div class="ck-price">￥{{ serverTotal }}</div>
                <div>
                  <el-button
                    type="primary"
                    :loading="addGoodLoading"
                    @click="addXfSave"
                    >确定</el-button
                  >
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 新增消费 -->
    <consume ref="consume" @addConsume="addConsume"></consume>

    <!-- 添加项目 -->
    <el-dialog
      title="新增消费"
      :visible.sync="addItemVis"
      width="360px"
      @close="addItemCancle"
    >
      <div>
        <el-form
          :model="addItemObj"
          :rules="addItemRules"
          ref="addItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="addItemObj.contentType === 'I' ? '项目数量' : '商品数量'"
            prop="contentCount"
          >
            <el-input-number
              v-model="addItemObj.contentCount"
              :min="1"
              :precision="0"
              :step="1"
              label="请选择数量"
              class="w-100"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="服务技师"
            prop="userId"
            v-if="addItemObj.contentType === 'I'"
          >
            <el-select
              v-model="addItemObj.userId"
              placeholder="请选择服务技师"
              filterable
              class="w-100"
              :loading="thArryLoading"
              @change="changeServeTh"
            >
              <el-option
                v-for="item in thArry"
                :key="item.userId"
                :label="item.nickname"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="上钟类型"
            prop="clockType"
            v-if="addItemObj.contentType === 'I'"
          >
            <el-select
              v-model="addItemObj.clockType"
              placeholder="请选择上钟类型"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in clockTypeList"
                :disabled="!!item.disabled"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addItemCancle">取消</el-button>
        <el-button type="primary" :loading="addItemLoading" @click="addItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 客户加钟 -->
    <el-dialog
      title="客户加钟"
      :visible.sync="clientAddItemVis"
      width="500px"
      @close="clientAddItemCancle"
    >
      <div class="clientAddItem">
        <el-form
          :model="clientAddItemObj"
          :rules="clientAddItemRules"
          ref="clientAddItemForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <div class="clientAddUserName">
            服务技师-{{ clientAddItemObj.userName }}
          </div>

          <el-form-item label="加钟项目" prop="contentId">
            <el-select
              :loading="shopItemLoading"
              v-model="clientAddItemObj.contentId"
              placeholder="请选择技师技能"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in shopItemArray"
                :key="item.itemId"
                :label="item.itemName"
                :value="item.itemId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="加钟数量" prop="contentCount">
            <el-input-number
              v-model="clientAddItemObj.contentCount"
              :min="1"
              :precision="0"
              :step="1"
              label="请选择数量"
              class="w-100"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="clientAddItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="clientAddItemLoading"
          @click="clientAddItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 换项目 -->
    <el-dialog
      title="更换项目"
      :visible.sync="changeServeItemVis"
      width="500px"
      @close="changeServeItemCancle"
    >
      <div class="changeServeItem">
        <el-form
          :model="changeServeItemObj"
          :rules="changeServeItemRules"
          ref="changeServeItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="更换项目" prop="itemId">
            <el-select
              :loading="shopItemLoading"
              v-model="changeServeItemObj.itemId"
              placeholder="请选择更换项目"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in shopItemArray"
                :key="item.itemId"
                :label="item.itemName"
                :value="item.itemId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="changeServeItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="changeServeItemLoading"
          @click="changeServeItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 换技师 -->
    <el-dialog
      title="换技师"
      :visible.sync="changeServeUserVis"
      width="500px"
      @close="changeServeUserCancle"
    >
      <div class="changeServeUser">
        <el-form
          :model="changeServeUserObj"
          :rules="changeServeUserRules"
          ref="changeServeUserForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="更换技师" prop="userId">
            <el-select
              :loading="thArryLoading"
              v-model="changeServeUserObj.userId"
              placeholder="请选择技师"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in thArry"
                :key="item.userId"
                :label="item.nickname"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="changeServeUserCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="changeServeUserLoading"
          @click="changeServeUserSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 办卡充值 -->
    <el-dialog
      title="选择会员卡"
      :visible.sync="OpenCarddialogVisible"
      width="700px"
      :before-close="OpenCardhandleClose"
    >
      <span>
        <div>
          <el-form
            :model="OpenCardForm"
            :rules="OpenCardRules"
            ref="OpenCardForm"
          >
            <el-row :gutter="20">
              <el-col :span="18">
                <el-form-item>
                  <el-input
                    v-model="OpenCardForm.keyWord"
                    placeholder="请输入会员卡或输入手机号、会员卡搜索"
                    :loading="loading"
                    maxlength="20"
                    class="w-100"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="ReadCard">读卡</el-button>
                <!-- <el-button type="primary" @click="SearchCardInfo"
                  >查找</el-button
                > -->
              </el-col>
            </el-row>
          </el-form>
        </div>
      </span>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="OpenCardhandleClose">取 消</el-button>
        <el-button type="primary" @click="SaveOpenCard">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- 修改时间 -->
    <el-dialog
      title="修改时间"
      :visible.sync="putServeItemTimeVis"
      width="500px"
      @close="putServeItemTimeCancle"
    >
      <div class="putServeItemTime">
        <el-form
          :model="putServeItemTimeObj"
          :rules="putServeItemTimeRules"
          ref="putServeItemTimeForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-form-item label="修改类型" prop="durationType">
            <el-select
              :loading="shopItemLoading"
              v-model="putServeItemTimeObj.durationType"
              placeholder="请选择修改类型"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in durationTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="修改分钟" prop="duration">
            <el-input-number
              v-model="putServeItemTimeObj.duration"
              :min="1"
              label="请选择数量"
              class="w-100"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="putServeItemTimeCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="putServeItemTimeLoading"
          @click="putServeItemTimeSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 结账 -->
    <el-dialog
      title="房间结账"
      :visible.sync="settleAccountsVis"
      width="1400px"
      @close="settleAccountsCancle"
    >
      <div class="room-style">
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="pay-user">
              <div class="pay-user-msg">
                <div class="none" v-show="!payClient.custId">
                  <el-button type="primary" @click="pickClientOpen"
                    >添加客户</el-button
                  >
                </div>

                <div class="pay-client" v-show="!!payClient.custId">
                  <div class="pay-client-head">
                    <div class="client-av">
                      <el-avatar
                        :size="56"
                        icon="el-icon-user-solid"
                      ></el-avatar>
                    </div>

                    <div>
                      <div class="clientAction">
                        <div class="clinet-name">{{ payClient.custName }}</div>
                        <div
                          class="replacement"
                          v-if="canChangeClient"
                          @click="pickClientOpen"
                        >
                          更换客户
                        </div>
                      </div>
                      <div>{{ payClient.custMobile }}</div>
                    </div>
                  </div>

                  <div class="y-nav" v-loading="payClientLoading">
                    <div class="y-head">
                      <div>当前余额（元）</div>
                      <div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="OpenClientCard"
                          >办卡充值</el-button
                        >
                      </div>
                    </div>

                    <div class="y-count">{{ payClient.totalBalance }}</div>
                    <div class="y-total">
                      <span>本金 {{ payClient.usablePrincipal }}</span>
                      <span>增金 {{ payClient.aggregateUsableGive }} </span>
                      <span>冻金 {{ payClient.blockedBalances }}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="pay-user-card">
                <div class="title">账户卡包</div>

                <div
                  class="client-card-list member_info_content"
                  v-loading="clinerCardLoading"
                >
                  <draggable v-model="MemberCardList" draggable=".usercardItem">
                    <div
                      :span="8"
                      v-for="(item, index) in MemberCardList"
                      :key="index"
                      class="usercardItem"
                    >
                      <div class="content_box">
                        <div class="style2">
                          <div
                            class="ey_top"
                            :class="item.state === 2 ? 'dis' : ''"
                          >
                            {{ item.cardName }}
                          </div>
                          <div class="expiration_date">
                            <!-- {{ item.indate }}前有效 -->
                            {{ item.state === 2 ? "已冻结" : "" }}
                          </div>
                          <div class="my_wallet">
                            <div
                              class="my_wallet_left"
                              v-if="item.cardType === 'M'"
                            >
                              <div class="rest_wallet">{{ item.balance }}</div>
                              <div class="balance_text">卡内余额（元）</div>
                            </div>
                            <div
                              class="my_wallet_left"
                              v-if="item.cardType === 'C'"
                            >
                              <div class="rest_wallet">
                                {{ item.itemCount }}
                              </div>
                              <div class="balance_text">剩余次数</div>
                            </div>
                            <div class="my_wallet_right">
                              <img
                                src="../../../assets/logo/Group.png"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="bottom_content">
                            <div
                              class="default_button hover_style"
                              @click="changeCardUser(item, index)"
                              v-if="item.state === 1"
                            >
                              <span v-if="item.cardType === 'M'">{{
                                item.active ? "取消使用" : "使用会员卡"
                              }}</span>
                            </div>

                            <div
                              class="default_button hover_style"
                              @click="userCardUpdateThaw(item)"
                              v-if="item.state === 2 || item.state === 3"
                            >
                              解冻
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </draggable>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="room-goods-list">
              <el-table
                ref="roomGoodsDTable"
                :data="settleAccountsPayList"
                style="width: 100%"
                height="400px"
                :row-key="'serverId'"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" :selectable="checkSelectable">
                </el-table-column>
                <el-table-column label="消费房间" prop="roomName">
                </el-table-column>
                <el-table-column prop="contentName" label="消费项目/商品">
                </el-table-column>
                <el-table-column prop="userName" label="服务技师">
                </el-table-column>

                <el-table-column prop="serverPrice" label="单价">
                </el-table-column>

                <el-table-column prop="serverCount" label="数量">
                </el-table-column>

                <el-table-column label="优惠信息">
                  <template slot-scope="scope">
                    <div v-if="scope.row.payStatus === 'N'">
                      <span
                        v-if="!scope.row.isYh"
                        class="hover_style2"
                        @click="preferentialItemOpen(scope.row, scope.$index)"
                        >添加优惠</span
                      >

                      <span v-if="!!scope.row.isYh">
                        <span> -￥{{ scope.row.preMoney }}</span>
                        <span
                          class="hover_style2"
                          @click="preferentialItemOpen(scope.row, scope.$index)"
                          >修改</span
                        >01
                      </span>
                    </div>
                    <div v-if="scope.row.payStatus === 'Y'">
                      已优惠 ￥{{ scope.row.prePrice }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="小计">
                  <template slot-scope="scope">
                    <span
                      >￥{{
                        scope.row.payStatus === "Y"
                          ? Number(scope.row.serverPriceSum).toFixed(2)
                          : scope.row.payStatus === "N"
                          ? (
                              Number(scope.row.serverPriceSum) -
                              Number(
                                !!scope.row.preMoney ? scope.row.preMoney : 0
                              )
                            ).toFixed(2)
                          : scope.row.serverPriceSum
                      }}</span
                    >
                  </template>
                </el-table-column>

                <el-table-column prop="payStatus" label="结算状态">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.payStatus === "Y"
                        ? "已结算"
                        : scope.row.payStatus === "N"
                        ? "未结算"
                        : ""
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>

              <div class="pay-type-list">
                <el-form
                  :model="settleAccountsObj"
                  ref="settleAccountsForm"
                  label-width="100px"
                >
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <el-form-item label="现金收款" prop="moneyRmb">
                        <el-input-number
                          v-model="settleAccountsObj.moneyRmb"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :controls="false"
                          class="w-100 text-left"
                          @focus="focusSumprice('moneyRmb')"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="微信收款" prop="moneyWx">
                        <el-input-number
                          v-model="settleAccountsObj.moneyWx"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :controls="false"
                          class="w-100 text-left"
                          @focus="focusSumprice('moneyWx')"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="支付宝收款" prop="moneyZfb">
                        <el-input-number
                          v-model="settleAccountsObj.moneyZfb"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :controls="false"
                          class="w-100 text-left"
                          @focus="focusSumprice('moneyZfb')"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="POS收款" prop="moneyPos">
                        <el-input-number
                          v-model="settleAccountsObj.moneyPos"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :controls="false"
                          class="w-100 text-left"
                          @focus="focusSumprice('moneyPos')"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="余额收款" prop="moneyMember">
                        <el-input-number
                          v-model="settleAccountsObj.moneyMember"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :disabled="yueCardIds.length === 0"
                          :controls="false"
                          class="w-100 text-left"
                          @focus="focusSumprice('moneyMember')"
                        ></el-input-number>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="团购实付" prop="moneyChannelReal">
                        <el-input-number
                          v-model="settleAccountsObj.moneyChannelReal"
                          :precision="2"
                          :step="0.1"
                          :min="0"
                          :controls="false"
                          class="w-100 text-left"
                          disabled
                        ></el-input-number>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <el-form-item label="进店方式" prop="OrderInStoreType">
                        <el-select
                          v-model="settleAccountsObj.OrderInStoreType"
                          placeholder="请选择进店方式"
                        >
                          <el-option
                            v-for="item in storeWayOptions"
                            :key="item.label"
                            :label="item.value"
                            :value="item.label"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="客户类型" prop="OrderCustType">
                        <el-select
                          v-model="settleAccountsObj.OrderCustType"
                          placeholder="请选择客户类型"
                        >
                          <el-option
                            v-for="item in custTypeOptions"
                            :key="item.label"
                            :label="item.value"
                            :value="item.label"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>

              <div class="pay-total-style">
                <div class="pay-total-list">
                  <div class="pay-total-item">订单金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.a }}
                  </div>

                  <div class="pay-total-item">优惠金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.b }}
                  </div>

                  <div class="pay-total-item">抵扣金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.c }}
                  </div>

                  <div class="pay-total-item">团购优惠</div>
                  <div class="pay-total-item">
                    {{ settleAccountsPayTotalData.k }}
                  </div>

                  <div class="pay-total-item">应收金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.d }}
                  </div>

                  <div class="pay-total-item">实收金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.e }}
                  </div>

                  <div class="pay-total-item">待收金额</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.f }}
                  </div>

                  <div class="pay-total-item">本次结算</div>
                  <div class="pay-total-item">
                    ￥{{ settleAccountsPayTotalData.j }}
                  </div>
                </div>
                <el-button
                  type="primary"
                  class="pay-but-style"
                  @click="goOrderPay"
                  :loading="orderPayLoading"
                >
                  收银
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 添加优惠 -->
    <el-dialog
      title="添加优惠"
      :visible.sync="preferentialItemVis"
      width="500px"
      @close="preferentialItemCancle"
    >
      <div class="preferentialItem">
        <el-form
          :model="preferentialItemObj"
          :rules="preferentialItemRules"
          ref="preferentialItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="优惠类型" prop="preType">
            <el-select
              v-model="preferentialItemObj.preType"
              placeholder="请选择优惠类型"
              filterable
              class="w-100"
              @change="preTypeChange"
            >
              <el-option
                v-for="item in preTypeOption"
                :disabled="
                  (preferentialItemObj.contentType === 'P' &&
                    (item.value === 'C' || item.value === 'L')) ||
                  (item.value === 'C' && !payClient.custId)
                    ? true
                    : false
                "
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="优惠次卡"
            prop="moneyCardId"
            v-if="preferentialItemObj.preType === 'C'"
          >
            <el-select
              v-model="preferentialItemObj.moneyCardId"
              placeholder="请选择优惠次卡"
              filterable
              :loading="moneyCardLoading"
              class="w-100"
            >
              <el-option
                v-for="item in moneyCardArry"
                :key="item.id"
                :label="item.cardName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="次卡数量"
            prop="moneyCardCount"
            v-if="
              preferentialItemObj.preType === 'C' ||
              preferentialItemObj.preType === 'L'
            "
          >
            <el-input-number
              v-model="preferentialItemObj.moneyCardCount"
              :precision="0"
              :step="1"
              :min="1"
              :max="preferentialItemObj.MaxNumber"
              class="w-100"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="团购类型"
            prop="moneyCardId"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-select
              v-model="preferentialItemObj.moneyCardId"
              placeholder="请选择团购类型"
              filterable
              :loading="moneyCardLoading"
              class="w-100"
            >
              <el-option
                v-for="item in moneyType"
                :key="item.channelId"
                :label="item.channelName"
                :value="item.channelId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="优惠金额"
            prop="preMoney"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-input-number
              v-model="preferentialItemObj.preMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="preferentialItemObj.serverPriceSum"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="实收金额"
            prop="realMoney"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-input-number
              v-model="preferentialItemObj.realMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="preferentialItemObj.serverPriceSum"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <div v-if="preferentialItemObj.preType === 'L'">
            <el-form-item
              v-for="(domain, index) in preferentialItemObj.minorCardNoList"
              :label="'优惠券码' + (index + 1)"
              :key="index"
              :prop="'minorCardNoList.' + index + '.value'"
              :rules="{
                required: true,
                message: '优惠券码不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="domain.value"></el-input>
            </el-form-item>
          </div>

          <el-form-item
            label="优惠信息"
            prop="preMoney"
            v-if="preferentialItemObj.preType === 'M'"
          >
            <el-input-number
              v-model="preferentialItemObj.preMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="preferentialItemObj.serverPriceSum"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="优惠信息"
            prop="bfb"
            v-if="preferentialItemObj.preType === 'P'"
          >
            <el-input-number
              v-model="preferentialItemObj.bfb"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="100"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="preferentialItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="preferentialItemLoading"
          @click="preferentialItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 选择客户 -->
    <el-dialog
      title="选择客户"
      :visible.sync="pickClientItemVis"
      width="720px"
      @close="pickClientItemCancle"
    >
      <div class="pick-clien-style">
        <div class="pick-client-head">
          <div class="input-left">
            <el-input
              class="w-100"
              v-model.trim="useStoreParams.keyword"
              placeholder="请输入客户姓名"
            ></el-input>
            <div class="but">
              <el-button type="primary" @click="handleCkientQuery"
                >搜索</el-button
              >
            </div>
          </div>
          <div class="input-add">
            <el-button type="primary" @click="hanldeAddClient"
              >新建客户</el-button
            >
          </div>
        </div>

        <div class="pick-clent-center">
          <div class="table-head">
            <div>客户名称</div>
          </div>
          <div class="pick-item-list" v-loading="clinetLoading">
            <el-radio-group v-model="pickClientItemObj.custId" class="w-100">
              <div
                class="pick-item-style"
                v-for="item in clinetArry"
                :key="item.id"
              >
                <div class="pick-item-center">
                  <el-radio :label="item.id"
                    ><span class="f-zero">{{ item.name }}</span></el-radio
                  >
                  <div class="user-style">
                    <div class="hover_style user-name">{{ item.name }}</div>
                    <div class="span_small">
                      <i class="el-icon-phone"></i>{{ item.mobile }}
                    </div>
                  </div>
                </div>
              </div>
            </el-radio-group>
          </div>

          <div class="text-right">
            <pagination
              :total="total"
              :page.sync="useStoreParams.pageNo"
              :limit.sync="useStoreParams.pageSize"
              @pagination="getClientList"
            />
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="pickClientItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="pickClientItemLoading"
          @click="pickClientItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 输入消费密码 -->
    <el-dialog
      title="输入消费密码"
      :visible.sync="payPasswordItemVis"
      width="360px"
      :before-close="payPasswordItemCancle"
    >
      <div>
        <el-form
          :model="payPasswordItem"
          :rules="payPasswordItemRules"
          ref="payPasswordItemForm"
          label-position="top"
          @submit.native.prevent
        >
          <div>请询问客户的消费密码</div>
          <el-form-item label="消费密码" prop="cardPassword">
            <el-input
              class="w-100 pwd"
              type="password"
              oncopy="return false"
              oncut="return false"
              onpaste="return false"
              auto-complete="off"
              v-model.trim="payPasswordItem.cardPassword"
              placeholder="请输入6位消费密码"
              ref="payPassword"
              @keyup.enter.native="payPasswordItemSave"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer">
        <el-button @click="payPasswordItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="payPasswordItemLoading"
          @click="payPasswordItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="修改房屋状态"
      :visible.sync="sweepmRoomItemVis"
      width="500px"
      @close="sweepmRoomItemCancle"
    >
      <div class="sweepmRoomItem">
        <el-form
          :model="sweepmRoomItemObj"
          :rules="sweepmRoomItemRules"
          ref="sweepmRoomItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="房屋状态" prop="roomStatus">
            <el-select
              v-model="sweepmRoomItemObj.roomStatus"
              placeholder="请选择房屋状态"
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in roomStatusArry"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="sweepmRoomItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="sweepmRoomItemLoading"
          @click="sweepmRoomItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 联房/换房 -->
    <el-dialog
      :title="roomMorCItremTitle"
      :visible.sync="roomMorCItremVis"
      width="500px"
      @close="roomMorCItremCancle"
    >
      <div class="roomMorCItrem">
        <el-form
          :model="roomMorCItremObj"
          :rules="roomMorCItremRules"
          ref="roomMorCItremForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="
              roomMorCItremObj.changeType === 1
                ? '请选择联合房间'
                : roomMorCItremObj.changeType === 2
                ? '请选择更换房间'
                : ''
            "
            prop="roomIds"
          >
            <el-select
              :loading="roomMorCItremLoading"
              v-model="roomMorCItremObj.roomIds"
              placeholder="请选择"
              :multiple="roomMorCItremObj.changeType === 1 ? true : false"
              filterable
              class="w-100"
              :disabled="!!roomMorCItremObj.splitOrderId"
            >
              <el-option
                v-for="item in roomMorCItremRoomList"
                :key="item.roomId"
                :label="item.roomName || item.name"
                :value="item.roomId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="roomMorCItremObj.changeType === 1"
            label="请选择拆分房间"
            prop="splitOrderId"
          >
            <el-select
              :loading="roomMorCItremLoading"
              v-model="roomMorCItremObj.splitOrderId"
              placeholder="请选择"
              filterable
              class="w-100"
              :disabled="
                !!roomMorCItremObj.roomIds &&
                roomMorCItremObj.roomIds.length > 0
              "
            >
              <el-option
                v-for="item in roomSplitRoomList"
                :key="item.orderId"
                :label="item.roomNameStr"
                :value="item.orderId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="roomMorCItremCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="roomMorCItremLoading"
          @click="roomMorCItremSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 房间转账 -->
    <el-dialog
      title="房间转账"
      :visible.sync="TransferdialogVisible"
      width="1000px"
      :before-close="RoomsTransferAction"
    >
      <span>
        <el-form
          ref="TransferForm"
          :rules="TransferRules"
          :model="TransferParams"
        >
          <el-row>
            <el-col :span="10">
              <el-form-item label="转出房间:" prop="roomIdOld">
                <el-select
                  v-model="TransferParams.roomIdOld"
                  class="w-300"
                  placeholder="请选择转出房间号"
                  @change="ChangeRoom"
                >
                  <el-option
                    v-for="item in TransferList"
                    :key="item.roomId"
                    :label="item.roomId + ' ' + item.name"
                    :value="item.roomId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="转入房间" prop="roomIdNew">
                <el-select
                  v-model="TransferParams.roomIdNew"
                  class="w-300"
                  placeholder="请选择转入房间号"
                >
                  <el-option
                    v-for="item in TransferList"
                    :key="item.roomId"
                    :label="item.roomId + ' ' + item.name"
                    :value="item.roomId"
                  >
                  </el-option> </el-select
              ></el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="SearchTransfer">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>

        <div>
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="selectFun"
            :row-key="'serverId'"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="contentName" label="消费项目">
            </el-table-column>
            <el-table-column prop="userName" label="技师号"> </el-table-column>
            <el-table-column prop="sellUserName" label="销售">
            </el-table-column>
            <el-table-column prop="" label="钟类型">
              <template slot-scope="scope">
                {{ clockTypeObj[scope.row.clockType] }}
              </template>
            </el-table-column>
            <el-table-column prop="serverCount" label="数量"> </el-table-column>
            <el-table-column prop="serverPrice" label="单价"> </el-table-column>
            <el-table-column prop="serverPriceSum" label="小计">
            </el-table-column>
          </el-table>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="RoomsTransferAction">取 消</el-button>
        <el-button type="primary" @click="SaveTransfer">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查找会员卡 -->
    <!-- <el-dialog
      title="查找会员卡"
      :visible.sync="MemberCarddialogVisible"
      width="800px"
      :before-close="MemberCardhandleClose"
    >
      <span>
        <el-form
          :model="MemberForm"
          :rules="MemberRules"
          ref="MemberForm"
          label-width="0"
          class="demo-ruleForm"
        >
          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item prop="name">
                <el-input
                  class="w-100"
                  v-model="MemberForm.name"
                  placeholder="请输入手机号、卡号、姓名或备注进行查询"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-delete">清除</el-button>
            </el-col>
            <el-col :span="3">
              <el-button type="primary">办卡</el-button>
            </el-col>
          </el-row>
        </el-form>

        <div>
          <el-table :data="clinetArry" style="width: 100%">
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="180">
            </el-table-column>
            <el-table-column prop="totalBalance" label="余额"> </el-table-column>
          </el-table>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="MemberCardhandleClose">取 消</el-button>
        <el-button type="primary" @click="MemberCardclose">确 定</el-button>
      </span>
    </el-dialog> -->

    <client-info ref="clientInfo" @change="clientInfoChange"></client-info>

    <new-client ref="newClient" @onSuccess="hanldeClientList"></new-client>
    <new-card ref="newCard" @onSuccess="getPayClient"></new-card>
  </div>
</template>

<script>
import {
  getStoreRoom,
  getOrderbyRoom,
  getStoreUser,
  roomOrderCreate,
  itemAllList,
  getProductList,
  orderCreateServer,
  getbyOrderId,
  upDown,
  orderClockBack,
  orderClockCancel,
  editServeItem,
  editServeUser,
  editItemTime,
  getMinorCardListByItemId,
  orderPay,
  orderCustom,
  orderClose,
  orderSweepm,
  clientTotalAmount,
  getMemberCard,
  orderMerge,
  orderExchangeRoom,
  orderSplit,
  cardUpdateThaw,
  RoomTotal,
  mergePermit,
  getTransfeServer,
  getRoomTransfe,
  getSplitRoom,
  getShiftLoopToday,
  updateShift,
  updateList,
  getMemberCardInfo,
  getSelectData,
  getCardType,
} from "@/api/business/BusinessIndex";

import {
  getClientSourceList,
  getAvailableClientList,
  CreateProjectCard,
} from "@/api/business/client";
import draggable from "vuedraggable";
import consume from "@/components/business/consume";
import newClient from "./model/newClient";
import newCard from "./model/newCard";
import md5 from "md5";
import { resolve } from "path";
import ClientInfo from "@/components/ClientInfo/clientInfo.vue";

export default {
  name: "EryuoaStoreFrontendBusinessIndex",
  components: {
    newClient,
    newCard,
    consume,
    draggable,
    ClientInfo,
  },
  data() {
    return {
      contentId: "",
      SumPrice: 0,
      storeWayOptions: [],
      custTypeOptions: [],
      tableData: [],
      MemberCarddialogVisible: false,
      canChangeClient: false,
      MemberForm: {},
      OpenCarddialogVisible: false,
      OpenCardForm: {},
      roomSplitRoomList: [], // 拆房
      TransferdialogVisible: false,
      newClientCardLoading: false,

      loading: false,

      TransferParams: {
        roomIdOld: "",
        roomIdNew: "",
        serverIds: [],
      },

      orderPayLoading: false,
      queryParams: {
        floorId: "",
        typeId: "",
        bedsId: "",
        roomStatus: "",
      },

      ShiftLoopLoading: false,
      ShiftLoops: [], // 班次 技师信息
      userList: [], // 用户
      userStatusObj: {
        0: "上钟",
        1: "空闲",
      },

      total: 0,

      RoomChangedialogVisible: false,

      statusTotal: [], // 房态

      statusTotals: [
        {
          id: 1,
          name: "空闲",
        },
        {
          id: 2,
          name: "维修",
        },
      ],
      floorTotal: [], // 楼层
      typeTotal: [], // 类型
      bedsTotal: [], // 床位

      bedList: [],
      roomTypeList: [],
      foorList: [],
      roomLoading: false,

      roomMsgLoading: false,
      curRoomData: {},
      noPay: true,
      roomList: [],
      roomStatusObj: {
        0: "空闲",
        1: "有客",
        2: "打扫",
        3: "已结账",
        4: "维修",
      },

      roomStatusClass: {
        0: "a",
        1: "b",
        2: "d",
        3: "c",
        4: "d",
      },

      TurnRules: {
        userId: [
          { required: true, message: "请选择轮过技师", trigger: "change" },
        ],
      },

      newClientRules: {
        name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号" },
          {
            validator: this.checkPhone,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入6位数消费密码", trigger: "blur" },
          { min: 6, max: 6, message: "请输入6位数消费密码", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        sourceId: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },

      TurnRuleForm: {
        shiftId: "",
        userId: "",
      },

      TurndialogVisible: false,

      roomStatusOptions: [
        {
          label: "空闲",
          value: 0,
        },
        {
          label: "有客",
          value: 1,
        },
        {
          label: "打扫",
          value: 2,
        },
        {
          label: "已结账",
          value: 3,
        },
        {
          label: "维修",
          value: 4,
        },
      ],

      serverStatusObj: {
        N: "-待上钟",
        I: "-进行中",
        F: "-已下钟",
        C: "-退单",
      },
      value11: "",
      options: [],
      activeName: "0",
      serverTotal: "0.00",
      addGoodVis: false,
      addGoodLoading: false,
      addGoodItem: {
        orderId: "",
        serverList: [],
      },
      shopItemLoading: false,
      shopItemArray: [],
      shopProductLoading: false,
      shopProductQuery: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      shopProductArray: [],
      addItemVis: false,
      addItemLoading: false,

      addItemObj: {
        clockType: "",
        contentCount: 1,
        contentId: "",
        contentType: "",
        orderId: "",
        userId: "",
      },
      clockTypeList: [],

      clockTypeObj: {
        F: "轮钟",
        P: "点钟",
        A: "加钟",
        V: "约客",
        W: "加班",
      },
      thArryLoading: false,
      thArry: [],
      thArryObj: {},
      addItemRules: {
        userId: [
          { required: true, message: "请选择服务技师", trigger: "change" },
        ],

        contentCount: [
          { required: true, message: "请输入数量", trigger: "change" },
        ],

        clockType: [
          { required: true, message: "请选择上钟类型", trigger: "change" },
        ],
      },

      MemberRules: {},

      // 办卡充值
      OpenCardRules: {
        keyWord: [
          {
            required: true,
            message: "请输入会员卡号或手机号",
            trigger: "change",
          },
        ],
      },

      // 客户加钟
      clientAddItemVis: false,
      clientAddItemLoading: false,
      clientAddItemObj: {
        contentId: "",
        orderI: "",
        userId: "",
        userName: "",
        contentCount: 0,
      },

      clientAddItemRules: {
        contentId: [
          { required: true, message: "请选择项目", trigger: "change" },
        ],

        contentCount: [
          { required: true, message: "请选择数量", trigger: "change" },
        ],
      },

      // 换项目
      changeServeItemVis: false,
      changeServeItemLoading: false,
      changeServeItemObj: {
        itemId: "",
        serverId: "",
      },

      changeServeItemRules: {
        itemId: [
          { required: true, message: "请选择要更换的项目", trigger: "change" },
        ],
      },

      // 换技师
      changeServeUserVis: false,
      changeServeUserLoading: false,
      changeServeUserObj: {
        userId: "",
        serverId: "",
      },

      changeServeUserRules: {
        userId: [{ required: true, message: "请选择技师", trigger: "change" }],
      },

      // 修改时间

      putServeItemTimeVis: false,
      putServeItemTimeLoading: false,
      putServeItemTimeObj: {
        durationType: "",
        serverId: "",
        duration: "",
      },

      durationTypeOption: [
        {
          label: "提前",
          value: "B",
        },
        {
          label: "延后",
          value: "A",
        },
      ],

      putServeItemTimeRules: {
        durationType: [
          { required: true, message: "请选择修改类型", trigger: "change" },
        ],
        duration: [
          { required: true, message: "请选择修改时间", trigger: "change" },
        ],
      },

      settleAccountsVis: false,
      settleAccountsObj: {
        moneyMember: 0,
        moneyPos: 0,
        moneyRmb: 0,
        moneyWx: 0,
        moneyZfb: 0,
        moneyChannelReal: 0,
        orderId: "",
        OrderInStoreType: "",
        OrderCustType: "",
        payList: [],
      },
      payClient: {},
      payClientLoading: false,
      settleAccountsPayList: [],
      settleAccountsPayObj: {},
      multipleSelection: [],
      settleAccountsPayTotalData: {
        a: "0.00", //  订单金额
        b: "0.00", // 优惠金额
        Ab: 0,
        c: "0.00", // 抵扣金额,
        Ac: 0,
        d: "0.00", // 应收金额
        e: "0.00", // 实收金额
        f: "0.00", // 待收金额
        j: "0.00", // 本次结算
        k: "0.00", // 团购优惠
      },

      tableData: [],

      // 添加优惠
      moneyType: [],

      preferentialItemVis: false,
      preferentialItemLoading: false,
      preferentialItemObj: {
        index: -1,
        MaxNumber: 0,
        serverPriceSum: 0,
        bfb: 0,
        moneyCardCount: "",
        moneyCardId: "",
        preMoney: "",
        preType: "",
        minorCardNoList: [],
        realMoney: "",
      },
      preTypeOption: [
        {
          label: "次卡优惠",
          value: "C",
        },
        {
          label: "百分比优惠",
          value: "P",
        },
        {
          label: "金额优惠",
          value: "M",
        },
        {
          label: "团购优惠",
          value: "L",
        },
      ],

      moneyCardLoading: false,
      moneyCardArry: [],
      moneyCardArryObj: {},
      preferentialItemRules: {
        // preType: [
        //   { required: true, message: "请选择优惠类型", trigger: "change" },
        // ],

        moneyCardId: [
          {
            required: true,
            validator: this.checkMoneyCard,
            trigger: "blur",
          },
        ],

        moneyCardCount: [
          { required: true, message: "请选择优惠数量", trigger: "change" },
        ],

        preMoney: [
          { required: true, message: "请输入优惠金额", trigger: "change" },
        ],
        bfb: [
          { required: true, message: "请输入优惠百分比", trigger: "change" },
        ],

        realMoney: [
          { required: true, message: "请输入实收金额", trigger: "change" },
        ],
      },

      // 开房
      openRoomItemVis: false,
      openRoomItemLoading: false,
      openRoomItemObj: {
        receiveUserId: "",
        roomId: "",
        OrderInStoreType: "",
        custCount: 1,
        roomIds: [],
        domains: [],
      },
      openRoomList: [],
      //    {  min:1,message: "q", trigger: "blur" },
      openRoomItemRules: {
        receiveUserId: [
          { required: true, message: "请选择待客员工", trigger: "change" },
        ],
        custCount: [
          { required: true, message: "请输入客户数量", trigger: "change" },
        ],
        OrderInStoreType: [
          { required: true, message: "请选择进店方式", trigger: "change" },
        ],
      },

      TransferRules: {
        roomIdOld: [
          { required: true, message: "请选择转出房间号", trigger: "change" },
        ],
        roomIdNew: [
          { required: true, message: "请选择转入房间号", trigger: "change" },
        ],
      },
      storeUserLoading: false,
      storeUser: [],

      // 选择客户
      pickClientItemVis: false,
      pickClientItemLoading: false,
      pickClientItemObj: {
        keyword: "",
        orderId: "",
        custId: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },

      useStoreParams: {
        pageNo: 1,
        pageSize: 10,
        keyword: "",
      },

      ClientSourceData: [], // 客户来源数据
      newClientLoading: false,

      newClientForm: {
        name: "",
        mobile: "",
        mobile2: "",
        password: "",
        sex: "",
        birthday: "",
        referrer: "",
        sourceId: "",
      },

      // 性别
      Sexoptions: [
        {
          value: 0,
          label: "未知",
        },
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],

      pickClientItemRules: {
        custId: [{ required: true, message: "请选择客户", trigger: "change" }],
      },

      clinetLoading: false,
      clinetArry: [],
      clinetArryObj: {},
      sweepmRoomItemVis: false,
      sweepmRoomItemLoading: false,
      sweepmRoomItemObj: {
        roomId: "",
        roomStatus: "",
      },

      sweepmRoomItemRules: {
        roomStatus: [
          { required: true, message: "请选择房间状态", trigger: "change" },
        ],
      },

      roomStatusArry: [],
      clinerCardLoading: false,
      MemberCardList: [],
      yueCardIds: [],
      yueTotal: 0,

      payPasswordItemVis: false,
      payPasswordItemLoading: false,
      payPasswordItem: {
        cardPassword: "",
      },

      payPasswordItemRules: {
        cardPassword: [
          { required: true, message: "请输入消费密码", trigger: "change" },
        ],
      },

      // 换房/联房
      roomMorCItremTitle: "",
      roomMorCItremVis: false,
      roomMorCItremLoading: false,
      roomMorCItremRoomList: [],
      roomMorCItremObj: {
        changeType: 0, // 1联房 换房
        roomId: "",
        splitOrderId: "",
        roomIds: [],
      },
      //    {  min:1,message: "q", trigger: "blur" },
      roomMorCItremRules: {},
      itemLoading: false,
      itemArray: [],

      TransferList: [], // 房间转账

      loopList: [],
      loopObj: {},
    };
  },
  watch: {
    settleAccountsPayList: {
      handler(newVal, oldVal) {
        this.changePayList();
      },
    },

    MemberCardList: {
      handler(newVal, oldVal) {
        let yueTotal = 0;
        let cardIds = [];
        for (let index = 0; index < newVal.length; index++) {
          const element = newVal[index];

          if (!!element.active) {
            cardIds.push(element.id);
            yueTotal += Number(element.balance);
          }
        }

        this.yueTotal = yueTotal.toFixed(2);
        this.yueCardIds = cardIds;
      },
      deep: true,
    },

    "settleAccountsPayTotalData.j": {
      handler(newVal, oldVal) {
        this.settleAccountsObj.moneyRmb = 0;
        this.settleAccountsObj.moneyWx = 0;
        this.settleAccountsObj.moneyZfb = 0;
        this.settleAccountsObj.moneyPos = 0;
        this.settleAccountsObj.moneyMember = 0;
        this.SumPrice = Number(newVal);
      },
      deep: true,
    },

    queryParams: {
      handler(newVal, oldVal) {
        this.getRoomList();
      },
      deep: true,
    },

    "preferentialItemObj.moneyCardCount": {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        if (newVal === "" || newVal === undefined || newVal === null) {
        } else if (newVal > oldVal) {
          let n = newVal - oldVal;
          for (let i = 0; i < n; i++) {
            this.preferentialItemObj.minorCardNoList.push({
              value: "",
            });
          }
        } else if (newVal < oldVal) {
          let n = oldVal - newVal;
          for (let i = 0; i < n; i++) {
            this.preferentialItemObj.minorCardNoList.splice(
              this.preferentialItemObj.minorCardNoList.length - 1,
              1
            );
          }
        }
      },
      deep: true,
    },
  },

  created() {
    this.getRoomList();
    this.getShiftLoopTodayList();
    // this.getRoomSetting(1);
    // this.getRoomSetting(2);
    // this.getRoomSetting(3);

    this.getRoomTotal();

    this.getClientSource();
  },
  mounted() {},

  methods: {
    checkMoneyCard(rule, value, callback) {
      const { preType } = this.preferentialItemObj;
      if (preType === "C" && !value) {
        callback(new Error("请选择次卡数量"));
      } else if (preType === "L" && !value) {
        callback(new Error("请选择团购类型"));
      } else {
        callback();
      }
    },

    getCardTypes() {
      getCardType()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.moneyType = data;
          }
        })
        .catch((err) => {});
    },

    focusSumprice(price) {
      const { moneyRmb, moneyWx, moneyZfb, moneyPos, moneyMember } =
        this.settleAccountsObj;
      let obj = {
        moneyRmb,
        moneyWx,
        moneyZfb,
        moneyPos,
        moneyMember,
      };
      delete obj[price];
      console.log(obj);

      let sumPrices = 0;
      for (let keys in obj) {
        let key = obj[keys];
        console.log(key);
        if (!!key) {
          sumPrices += key;
        }
      }
      this.settleAccountsObj[price] = Number(
        (this.SumPrice - sumPrices).toFixed(2)
      );
    },

    // 更换客户
    ghCustomer() {},
    // @click="pickClientOpen"

    MemberCardclose() {},
    MemberCardhandleClose() {
      this.$nextTick(() => {
        this.MemberCarddialogVisible = false;
      });
    },

    getClientSource() {
      getClientSourceList().then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.ClientSourceData = data;
        }
      });
    },

    // 读卡
    ReadCard() {
      if (!this.OpenCardForm.keyWord) {
        this.$message.error("手机号或会员卡号不能为空");
        return false;
      }

      this.getMember();
    },

    getMember() {
      getMemberCardInfo({ keyWord: this.OpenCardForm.keyWord })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            if (data === null) {
              this.Open();
            } else if (!!data.id) {
              this.$nextTick(() => {
                this.$refs.clientInfo.MemberUserInfo({ id: data.id });
                this.OpenCardhandleClose();
              });
            }
          }
        })
        .catch((err) => {});
    },

    Open() {
      this.$confirm(
        "会员卡不存在，或该手机号未开通会员,是否添加为会员?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$nextTick(() => {
            this.$refs.clientInfo.NewmemberUser();
          });
          this.OpenCardhandleClose();
        })
        .catch(() => {});
    },

    // 查找
    // SearchCardInfo() {
    //   this.MemberCarddialogVisible = true;
    //   this.getClientList();
    // },

    OpenCardhandleClose() {
      this.$nextTick(() => {
        this.OpenCarddialogVisible = false;
        this.resetForm("OpenCardForm");
      });
    },

    // 拓拽
    onEnd(loop) {
      let arry = loop.map((item) => {
        return item.userId;
      });
      this.ShiftLoopLoading = true;
      updateList(arry)
        .then((res) => {
          this.ShiftLoopLoading = false;
          const { code } = res;
          if (code === 0) {
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.ShiftLoopLoading = false;
        });
    },

    // 轮过 确定
    SureShift() {
      this.$refs["TurnRuleForm"].validate((valid) => {
        if (valid) {
          const { shiftId, userId } = this.TurnRuleForm;
          updateShift({
            shiftId: this.loopObj[userId].shiftId,
            userId,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.TurnhandleClose();
                this.getShiftLoopTodayList();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    TurnShift() {
      this.TurndialogVisible = true;
      this.getShiftLoopTodayList();
    },

    // 技师信息
    getShiftLoopTodayList() {
      this.ShiftLoopLoading = true;
      getShiftLoopToday({})
        .then((res) => {
          this.ShiftLoopLoading = false;
          const { code, data } = res;
          if (code === 0) {
            let array = [];
            for (let i = 0; i < data.length; i++) {
              let loop = data[i].loop;
              array = array.concat(loop);
            }
            this.ShiftLoops = data;
            this.loopList = array;

            let obj = {};
            for (let i = 0; i < array.length; i++) {
              let Item = array[i];
              obj[Item.userId] = Item;
            }
            this.loopObj = obj;
            console.log(this.loopObj);
          }
        })
        .catch((err) => {
          this.ShiftLoopLoading = false;
        });
    },

    TurnhandleClose() {
      this.$nextTick(() => {
        this.TurndialogVisible = false;
      });
      this.resetForm("TurnRuleForm");
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 拆分房间
    getSplitRoomList() {
      getSplitRoom({}).then((res) => {
        const { code, data } = res;
        if (code === 0) {
          this.roomSplitRoomList = data;
        }
      });
    },

    selectFun(val) {
      let arry = val.map((item) => {
        return item.serverId;
      });
      this.TransferParams.serverIds = arry;
    },

    // 房间转账
    RoomTransfer() {
      this.TransferdialogVisible = true;
      this.getRoomList().then((res) => {
        let TransferList = [];

        for (let i = 0; i < res.length; i++) {
          let Item = res[i];
          if (Item.roomStatus === 1) {
            TransferList.push(Item);
          }
        }
        this.TransferList = TransferList;
      });
    },

    // 查询房间 转账服务
    ChangeRoom() {
      getTransfeServer({ roomId: this.TransferParams.roomIdOld })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.tableData = data;
          }
        })
        .catch((res) => {});
    },

    // 转账 确定
    SaveTransfer() {
      this.$refs["TransferForm"].validate((valid) => {
        if (valid) {
          if (this.TransferParams.serverIds.length === 0) {
            this.$message.error("请选择要转移的服务");
            return false;
          }
          const { roomIdOld, roomIdNew, serverIds } = this.TransferParams;
          getRoomTransfe({
            roomIdOld: roomIdOld,
            roomIdNew: roomIdNew,
            serverIds: serverIds,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.$message.success("操作成功");
                this.RoomsTransferAction();
                this.getRoomList();
              }
            })
            .catch((err) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 搜索
    SearchTransfer() {
      this.getRoomList();
    },

    RoomsTransferAction() {
      this.$refs.multipleTable.clearSelection();
      this.resetFormData("TransferForm");
      this.$nextTick(() => {
        this.tableData = [];
        this.TransferdialogVisible = false;
      });
    },

    ChangehandleClose() {
      this.$nextTick(() => {
        this.RoomChangedialogVisible = false;
      });
    },

    RoomChange() {
      this.RoomChangedialogVisible = false;
    },

    getRoomTotal() {
      RoomTotal()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.statusTotal = data.statusTotal;
            this.floorTotal = data.floorTotal;
            this.typeTotal = data.typeTotal;
            this.bedsTotal = data.bedsTotal;
            this.total = data.total;
          }
        })
        .catch((err) => {});
    },

    changePayList() {
      let settleAccountsPayObj = {};
      let canChangeClient = true;
      for (let index = 0; index < this.settleAccountsPayList.length; index++) {
        let element = JSON.parse(
          JSON.stringify(this.settleAccountsPayList[index])
        );
        element.index = index;
        settleAccountsPayObj[element.serverId] = element;

        if (element.payStatus === "Y") {
          canChangeClient = false;
        }
      }

      this.canChangeClient = canChangeClient;

      this.settleAccountsPayObj = settleAccountsPayObj;
    },
    handleQuery() {
      this.getRoomList();
    },

    resetQuery() {
      this.resetFormData("queryParams");
      this.handleQuery();
    },

    getRoomList() {
      return new Promise((resolve, reject) => {
        this.roomLoading = true;
        getStoreRoom(this.queryParams)
          .then((res) => {
            // console.log(res);
            this.roomLoading = false;
            const { code, data } = res;
            if (code === 0) {
              this.roomList = data.map((item) => {
                item.roomNameMergeStr =
                  !!item.roomNameMerge && item.roomNameMerge.length > 1
                    ? item.roomNameMerge.join(",")
                    : "";
                return item;
              });
              resolve(this.roomList);
            } else {
              reject();
            }
          })
          .catch((err) => {
            this.roomLoading = false;
            reject();
          });
      });
    },
    pickRoomItem(row) {
      if (this.roomMsgLoading) {
        return false;
      }

      this.getSelectStoreType();

      let newRow = JSON.parse(JSON.stringify(row));

      newRow.orderOpen = "";
      newRow.lastTime = "";
      newRow.orderMoney = "";
      newRow.moneyWait = "";
      newRow.serverList = [];

      this.curRoomData = newRow;
      this.getRooMsg(row)
        .then(() => {
          this.ChangeRoomStatus();
        })
        .catch(() => {});
    },

    ChangeRoomStatus() {
      const row = this.curRoomData;
      if (row.roomStatus === 0) {
        this.openRoom(row); // 开房
      } else if (row.roomStatus === 1 || row.roomStatus === 3) {
        // 打开弹框
        this.RoomChangedialogVisible = true;
      } else if (row.roomStatus === 2 || row.roomStatus === 4) {
        this.clickOrderSweepm(row.roomStatus);
      }
    },

    getRooMsg(row) {
      return new Promise((resolve, reject) => {
        this.noPay = true;
        this.roomMsgLoading = true;
        getOrderbyRoom({
          roomId: row.roomId,
        })
          .then((res) => {
            this.roomMsgLoading = false;
            const { code, data } = res;
            if (code === 0 && row.roomId === this.curRoomData.roomId) {
              this.serCurRoomData(data);
              this.getRoomTotal();
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            this.roomMsgLoading = false;
            reject();
          });
      });
    },

    getbyOrderIdRom() {
      this.getRooMsg({
        roomId: this.curRoomData.roomId,
      });
      // this.noPay = true;
      // this.roomMsgLoading = true;
      // getbyOrderId({
      //   orderId: orderId,
      // })
      //   .then((res) => {
      //     this.roomMsgLoading = false;
      //     const { code, data } = res;
      //     if (code === 0 && orderId === this.curRoomData.orderId) {
      //       this.serCurRoomData(data);
      //     }
      //   })
      //   .catch((err) => {
      //     this.roomMsgLoading = false;
      //   });
    },

    serCurRoomData(data) {
      const { serverList, ...ndata } = data;
      let newServerList = [];
      for (let index = 0; index < serverList.length; index++) {
        const element = serverList[index];

        if (element.contentType === "I") {
          newServerList.push(element);
        }

        if (element.payStatus === "Y") {
          this.noPay = false;
        }
      }

      this.curRoomData = {
        ...ndata,
        serverAllList: JSON.parse(JSON.stringify(serverList)),
      };
      this.$set(this.curRoomData, "serverList", serverList);
      this.$set(
        this.curRoomData,
        "serverAllList",
        JSON.parse(JSON.stringify(serverList))
      );
    },

    // 开房
    openRoom(row) {
      this.openRoomItemObj.roomId = row.roomId + "";
      this.openRoomItemObj.roomIds = [];
      this.openRoomItemObj.roomIds.push(this.openRoomItemObj.roomId);
      this.openRoomItemObj.domains = [];
      this.openRoomItemObj.domains.push({
        roomId: this.openRoomItemObj.roomId,
        custCount: 1,
        name: row.name || row.roomName,
      });

      this.openRoomList = this.getOpenRoomList(0);
      this.openRoomItemVis = true;
      this.getOpenUser();
    },

    getOpenRoomList(status) {
      let roomList = [];
      for (let index = 0; index < this.roomList.length; index++) {
        const element = this.roomList[index];
        if (
          element.roomStatus === status ||
          element.roomStatus === String(status)
        ) {
          if (element.roomId === this.curRoomData.roomId + "") {
            roomList.unshift(element);
          } else {
            roomList.push(element);
          }
        }
      }

      return roomList;
    },

    openRoomPickRoomItem(isdis, item) {
      if (isdis) {
        return false;
      }

      const { roomIds } = this.openRoomItemObj;

      if (roomIds.includes(item.roomId)) {
        let index = roomIds.indexOf(item.roomId);
        this.openRoomItemObj.roomIds.splice(index, 1);
        this.openRoomItemObj.domains.splice(index, 1);
      } else {
        this.openRoomItemObj.roomIds.push(item.roomId);
        this.openRoomItemObj.domains.push({
          roomId: item.roomId,
          custCount: 1,
          name: item.name,
        });
      }
    },

    getOpenUser() {
      this.storeUserLoading = true;
      getStoreUser({ labelCode: "R" })
        .then((res) => {
          console.log(res);
          this.storeUserLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.storeUser = data;
          }
        })
        .catch((err) => {
          this.storeUserLoading = false;
        });
    },

    openRoomItemCancle() {
      this.resetFormData("openRoomItemForm");
      this.openRoomList = [];
      this.$nextTick(() => {
        this.openRoomItemVis = false;
        this.openRoomItemLoading = false;
      });
    },

    openRoomItemSave() {
      if (this.openRoomItemLoading) {
        return false;
      }

      this.$refs["openRoomItemForm"].validate((valid) => {
        if (valid) {
          let queryData = JSON.parse(JSON.stringify(this.openRoomItemObj));
          queryData.roomParams = queryData.domains.map((item) => {
            return {
              custCount: item.custCount,
              roomId: item.roomId,
            };
          });
          this.openRoomItemLoading = true;
          roomOrderCreate({
            receiveUserId: queryData.receiveUserId,
            roomParams: queryData.roomParams,
            inStoreType: queryData.OrderInStoreType,
          })
            .then((res) => {
              this.openRoomItemLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getRoomList();
                this.getRooMsg(this.curRoomData);
                this.$message.success("操作成功");
                this.openRoomItemCancle();
              }
            })
            .catch(() => {
              this.openRoomItemLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 新增消费
    openAdddGood() {
      this.addGoodItem = {
        orderId: this.curRoomData.orderId,
        roomId: this.curRoomData.roomId,
        serverList: [],
      };
      this.$refs.consume.openAdddGood({
        orderId: this.curRoomData.orderId,
        roomId: this.curRoomData.roomId,
      });
      // this.addGoodVis = true;
      // this.serverTotal = "0.00";
      // this.addGoodLoading = false;
      // this.addGoodItem = {
      //   orderId: this.curRoomData.orderId,
      //   serverList: [],
      // };
      // this.activeName = "0";
      // this.getItemAllList();
    },

    addConsume(res) {
      const { serverList } = res;
      this.addGoodItem.serverList = serverList;
      if (
        !!this.addGoodItem.serverList &&
        this.addGoodItem.serverList.length === 0
      ) {
        this.$message.error("暂无新增的项目或商品");
        return false;
      }

      if (this.addGoodLoading) {
        return false;
      }

      this.addGoodLoading = true;
      const { orderId } = this.addGoodItem;
      orderCreateServer(this.addGoodItem)
        .then((res) => {
          this.addGoodLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.addGoodCancle();
            this.getRoomList();

            this.getRooMsg({
              roomId: this.curRoomData.roomId,
            });
          }
        })
        .catch((err) => {
          this.addGoodLoading = false;
        });
      // const { serverList } = res;
      // for (let i = 0; i < serverList.length; i++) {
      //   let Item = serverList[i];
      //   this.queryParams.recordingServiceList.push({
      //     clockTimeDown: "",
      //     clockTimeUp: "",
      //     clockType: Item.clockType,
      //     contentCount: Item.contentCount,
      //     contentId: Item.contentId,
      //     contentType: Item.contentType,
      //     contentName: Item.contentName,
      //     serverPriceSum: (
      //       Number(Item.price) * Number(Item.contentCount)
      //     ).toFixed(2),
      //     minorCardNo: "",
      //     moneyCardCount: "",
      //     moneyCardId: "",
      //     preMoney: "",
      //     preType: "",
      //     roomId: "",
      //     sellUserId: "",
      //     userId: Item.userId,
      //     price: Item.price,

      //     roomName: "",
      //     techicanName: "",
      //     total: Item.total,
      //   });
      // }
      // console.log(serverList);
    },

    getItemAllList() {
      this.shopItemLoading = true;
      itemAllList({
        sellStatus: 0,
      })
        .then((res) => {
          console.log(res);
          this.shopItemLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.shopItemArray = data;
          }
        })
        .catch((err) => {
          this.shopItemLoading = false;
        });
    },

    getProductAllList() {
      this.shopProductLoading = true;
      getProductList({
        pageNo: this.shopProductQuery.pageNo,
        pageSize: this.shopProductQuery.pageSize,
        sellStatus: 0,
      })
        .then((res) => {
          console.log(res);
          this.shopProductLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.shopProductArray = data.list;
            this.shopProductQuery.total = data.total;
          }
        })
        .catch((err) => {
          this.shopProductLoading = false;
        });
    },

    addGoodCancle() {
      this.addGoodVis = false;
      this.serverTotal = "0.00";
      this.addGoodLoading = false;
      this.addGoodItem = {
        orderId: "",
        serverList: [],
      };
    },

    handleClick() {
      if (this.activeName === "0") {
        this.getItemAllList();
      } else if (this.activeName === "1") {
        this.shopProductQuery.pageNo = 1;
        this.getProductAllList();
      }
    },

    itemAddOpen(row) {
      this.setUserItem(row, "I");
      this.getTharry(row.itemId);
    },

    goodsAddOpen(row) {
      this.setUserItem(row, "P");
    },

    setUserItem(row, contentType) {
      this.clockTypeList = [];
      this.addItemObj = {
        clockType: "",
        contentCount: 1,

        contentId:
          contentType === "I"
            ? row.itemId
            : contentType === "P"
            ? row.productId
            : "",
        contentType: contentType,
        orderId: this.addGoodItem.orderId,
        userId: "",

        contentName: row.itemName || row.name,
        price:
          contentType === "I"
            ? row.itemPrice
            : contentType === "P"
            ? row.price
            : 0,
      };

      this.addItemVis = true;
    },

    getTharry(itemId) {
      this.thArryLoading = true;
      getStoreUser({
        labelCode: "A",
        itemId: itemId,
        orderId: this.curRoomData.orderId,
      })
        .then((res) => {
          this.thArryLoading = false;
          const { code, data } = res;
          if (code === 0) {
            let thArry = [];
            let thArryObj = {};
            for (let index = 0; index < data.length; index++) {
              const item = data[index];
              thArry.push(item);
              thArryObj[item.userId] = item;
            }

            this.thArry = thArry;
            this.thArryObj = thArryObj;
          }
        })
        .catch((err) => {
          this.thArryLoading = false;
        });
    },

    changeServeTh() {
      let array = [];
      let thObj = this.thArryObj[this.addItemObj.userId];
      this.addItemObj.clockType = "";

      if (!!thObj && thObj.userStatus === "Y") {
        array = [
          {
            label: "加钟",
            value: "A",
          },
        ];
      } else {
        array = [
          {
            label: "轮钟",
            value: "F",
          },
          {
            label: "点钟",
            value: "P",
          },
        ];
      }

      this.clockTypeList = array;
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    addItemCancle() {
      this.resetFormData("addItemForm");

      this.addItemObj = {
        clockType: "",
        contentCount: 1,
        contentId: "",
        contentType: "",
        orderId: "",
        userId: "",
      };
      this.$nextTick(() => {
        this.addItemVis = false;
        this.addItemLoading = false;
      });
    },

    addItemSave() {
      if (this.addItemLoading) {
        return false;
      }

      this.$refs["addItemForm"].validate((valid) => {
        if (valid) {
          const addItemObj = JSON.parse(JSON.stringify(this.addItemObj));

          this.itemOrItemPushList(addItemObj);
          this.addItemCancle();
        } else {
          return false;
        }
      });
    },

    itemOrItemPushList(item) {
      const serverList = JSON.parse(
        JSON.stringify(this.addGoodItem.serverList)
      );

      const ids = serverList.map((item) => {
        return item.contentId;
      });

      let curIndex = ids.indexOf(item.contentId);
      let havItem = {};
      if (curIndex > -1) {
        havItem = JSON.parse(
          JSON.stringify(this.addGoodItem.serverList[curIndex])
        );
      }

      if (
        (curIndex > -1 &&
          havItem.userId === item.userId &&
          havItem.clockType === item.clockType &&
          havItem.contentType === "I") ||
        (curIndex > -1 && havItem.contentType === "P")
      ) {
        havItem.contentCount =
          Number(havItem.contentCount) + Number(item.contentCount);
        havItem.total = (havItem.price * havItem.contentCount).toFixed(2);
        this.$set(this.addGoodItem.serverList, curIndex, havItem);
      } else {
        item.total = (item.price * item.contentCount).toFixed(2);
        this.addGoodItem.serverList.push(item);
      }

      this.jishuanTotal();
    },

    delServerItem(index) {
      this.addGoodItem.serverList.splice(index, 1);
      this.jishuanTotal();
    },

    jishuanTotal() {
      const serverList = JSON.parse(
        JSON.stringify(this.addGoodItem.serverList)
      );

      let total = 0;
      for (let i = 0; i < serverList.length; i++) {
        let item = serverList[i];
        total += Number(item.total);
      }
      this.serverTotal = total.toFixed(2);
    },

    addXfSave() {
      if (
        (!!this.addGoodItem.serverList &&
          this.addGoodItem.serverList.length === 0) ||
        Number(this.serverTotal) === 0
      ) {
        this.$message.error("暂无新增的项目或商品");
        return false;
      }

      if (this.addGoodLoading) {
        return false;
      }

      this.addGoodLoading = true;
      const { orderId } = this.addGoodItem;
      orderCreateServer(this.addGoodItem)
        .then((res) => {
          this.addGoodLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.addGoodCancle();
            this.getRoomList();

            this.getRooMsg({
              roomId: this.curRoomData.roomId,
            });
          }
        })
        .catch((err) => {
          this.addGoodLoading = false;
        });
    },

    // 上钟,下钟

    serveUpDown(row) {
      let tip =
        row.serverStatus === "N"
          ? "上钟后服务开始计时，是否上钟"
          : row.serverStatus === "I"
          ? "是否确认下钟"
          : "";
      this.$msgbox({
        title: "提示",
        message: tip,
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";

            upDown({
              serverId: row.serverId,
            })
              .then((res) => {
                const { code, data } = res;
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (code === 0) {
                  done();
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });

                  this.getbyOrderIdRom(this.curRoomData.orderId);
                  this.getShiftLoopTodayList();
                }
              })
              .catch((err) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
              });
          } else {
            done();
          }
        },
      }).then((action) => {});
    },

    serveBack(row) {
      this.$msgbox({
        title: "提示",
        message: "确定退钟吗？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";

            orderClockBack({
              serverId: row.serverId,
            })
              .then((res) => {
                const { code, data } = res;
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (code === 0) {
                  done();
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.getbyOrderIdRom(this.curRoomData.orderId);
                }
              })
              .catch((err) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
              });
          } else {
            done();
          }
        },
      }).then((action) => {});
    },

    serveBackCancel(row) {
      this.$msgbox({
        title: "提示",
        message: "确定撤销下钟吗？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";

            orderClockCancel({
              serverId: row.serverId,
            })
              .then((res) => {
                const { code, data } = res;
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (code === 0) {
                  done();
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.getbyOrderIdRom(this.curRoomData.orderId);
                }
              })
              .catch((err) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
              });
          } else {
            done();
          }
        },
      }).then((action) => {});
    },

    clickOrderClose() {
      this.$msgbox({
        title: "提示",
        message: "退房后将关闭订单是否退房？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";

            orderClose({
              orderId: this.curRoomData.orderId,
            })
              .then((res) => {
                const { code, data } = res;
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (code === 0) {
                  done();
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.ChangehandleClose();
                  this.getRooMsg({ roomId: this.curRoomData.roomId });
                  this.getRoomList();
                }
              })
              .catch((err) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
              });
          } else {
            done();
          }
        },
      }).then((action) => {});
    },

    // 加钟

    openClientAddItem(row) {
      this.clientAddItemObj.orderId = this.curRoomData.orderId;
      this.clientAddItemObj.roomId = this.curRoomData.roomId;
      this.clientAddItemObj.userId = row.userId;
      this.clientAddItemObj.userName = row.userName;
      this.clientAddItemObj.contentCount = 1;
      this.clientAddItemVis = true;
      this.getItemAllList();
    },

    clientAddItemCancle() {
      this.resetFormData("clientAddItemForm");
      this.$nextTick(() => {
        this.clientAddItemVis = false;
        this.clientAddItemLoading = false;
      });
    },

    clientAddItemSave() {
      if (this.clientAddItemLoading) {
        return false;
      }

      this.$refs["clientAddItemForm"].validate((valid) => {
        if (valid) {
          const { orderId, userId, contentCount, contentId, roomId } =
            this.clientAddItemObj;

          let obj = {
            orderId: orderId,
            roomId: roomId,
            serverList: [
              {
                orderId,
                userId,
                contentCount,
                contentId,
                clockType: "A",
                contentType: "I",
              },
            ],
          };

          this.clientAddItemLoading = true;

          orderCreateServer(obj)
            .then((res) => {
              this.clientAddItemLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getbyOrderIdRom(orderId);
                this.$message.success("操作成功");
                this.clientAddItemCancle();
              }
            })
            .catch(() => {
              this.clientAddItemLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 换项目

    changeServeItemOpen(row) {
      this.changeServeItemObj.serverId = row.serverId;
      this.changeServeItemVis = true;
      this.getItemAllList();
    },

    changeServeItemCancle() {
      this.resetFormData("changeServeItemForm");
      this.$nextTick(() => {
        this.changeServeItemVis = false;
        this.changeServeItemLoading = false;
      });
    },

    changeServeItemSave() {
      if (this.changeServeItemLoading) {
        return false;
      }

      this.$refs["changeServeItemForm"].validate((valid) => {
        if (valid) {
          this.changeServeItemLoading = true;

          editServeItem(this.changeServeItemObj)
            .then((res) => {
              this.changeServeItemLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getbyOrderIdRom(this.curRoomData.orderId);
                this.$message.success("操作成功");
                this.changeServeItemCancle();
              }
            })
            .catch(() => {
              this.changeServeItemLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 换技师

    changeServeUserOpen(row) {
      this.changeServeUserObj.serverId = row.serverId;
      this.changeServeUserVis = true;
      console.log(row);
      this.getTharry(row.contentId);
    },

    changeServeUserCancle() {
      this.resetFormData("changeServeUserForm");
      this.$nextTick(() => {
        this.changeServeUserVis = false;
        this.changeServeUserLoading = false;
      });
    },

    changeServeUserSave() {
      if (this.changeServeUserLoading) {
        return false;
      }

      this.$refs["changeServeUserForm"].validate((valid) => {
        if (valid) {
          this.changeServeUserLoading = true;

          editServeUser(this.changeServeUserObj)
            .then((res) => {
              this.changeServeUserLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getbyOrderIdRom(this.curRoomData.orderId);
                this.$message.success("操作成功");
                this.changeServeUserCancle();
              }
            })
            .catch(() => {
              this.changeServeUserLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 修改时间

    openPutServeItemTime(row) {
      this.putServeItemTimeObj.serverId = row.serverId;
      this.putServeItemTimeObj.duration = 1;
      this.putServeItemTimeVis = true;
    },

    putServeItemTimeCancle() {
      this.resetFormData("putServeItemTimeForm");
      this.$nextTick(() => {
        this.putServeItemTimeVis = false;
        this.putServeItemTimeLoading = false;
      });
    },

    putServeItemTimeSave() {
      if (this.putServeItemTimeLoading) {
        return false;
      }

      this.$refs["putServeItemTimeForm"].validate((valid) => {
        if (valid) {
          this.putServeItemTimeLoading = true;

          editItemTime(this.putServeItemTimeObj)
            .then((res) => {
              this.putServeItemTimeLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getbyOrderIdRom(this.curRoomData.orderId);
                this.$message.success("操作成功");
                this.putServeItemTimeCancle();
              }
            })
            .catch(() => {
              this.putServeItemTimeLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 进店方式
    getSelectStoreType() {
      getSelectData({ dictType: "OrderInStoreType" })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.storeWayOptions = data;
          }
        })
        .catch((err) => {});
    },

    // 客户类型
    getSelectCustType() {
      getSelectData({ dictType: "OrderCustType" })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.custTypeOptions = data;
          }
        })
        .catch((err) => {});
    },

    // 结账
    settleAccountsOpen() {
      this.getSelectStoreType();
      this.getSelectCustType();
      this.yueCardIds = [];
      this.yueTotal = 0;
      const { OrderInStoreType } = this.settleAccountsObj;
      this.cacleSettleAccounts(OrderInStoreType);

      const {
        serverAllList,
        orderId,
        roomName,
        custId,
        custName,
        custMobile,
        custMobile2,
        custHeadPortrait,
        orderMoney,
        orderMoneyPre,
        moneyCard,
        orderMoneyReal,
        moneyChannel,
        moneyChannelReal,
        inStoreType,
        custType,
      } = this.curRoomData;

      let newSeverList = JSON.parse(JSON.stringify(serverAllList));

      let isNo = false;
      let downNo = false;

      for (let index = 0; index < newSeverList.length; index++) {
        const element = newSeverList[index];
        element.preMoney = 0;
        if (element.serverStatus === "N" && element.contentType === "I") {
          isNo = true;
        }

        if (element.serverStatus === "I") {
          downNo = true;
        }
      }

      if (isNo) {
        this.$message.warning("有未上钟的项目");
        return false;
      }

      if (downNo) {
        this.$message.warning("未下钟不能结账");
        return false;
      }

      let settleAccountsPayList = [];

      for (let index = 0; index < newSeverList.length; index++) {
        let item = newSeverList[index];
        item.roomName = roomName;

        if (item.serverStatus !== "C") {
          settleAccountsPayList.push(item);
        }
      }

      this.settleAccountsPayList = settleAccountsPayList;

      this.settleAccountsPayTotalData.a = orderMoney;
      this.settleAccountsPayTotalData.b = orderMoneyPre;
      this.settleAccountsPayTotalData.Ab = orderMoneyPre;

      this.settleAccountsPayTotalData.c = moneyCard;
      this.settleAccountsPayTotalData.Ac = moneyCard;
      this.settleAccountsPayTotalData.e = orderMoneyReal;
      this.settleAccountsPayTotalData.k = moneyChannel;
      this.settleAccountsObj.moneyChannelReal = moneyChannelReal;

      this.settleAccountsObj.OrderInStoreType = inStoreType;
      this.settleAccountsObj.custType = custType;

      this.settleAccountsObj.orderId = orderId;
      this.settleAccountsObj.custId = custId;

      this.settleAccountsVis = true;

      if (!!custId) {
        this.payClient = {
          custId: custId,
          custName: custName,
          custMobile: custMobile,
          custMobile2: custMobile2,
          custHeadPortrait: custHeadPortrait,
        };
        this.getPayClient();
      }

      this.totalJieshuanItem();
    },

    checkSelectable(row) {
      return row.payStatus === "Y" || row.serverStatus === "C" ? false : true;
    },

    // 获取客户信息

    getPayClient() {
      if (!this.payClient.custId) {
        return false;
      }
      this.payClientLoading = true;
      clientTotalAmount({
        customerId: this.payClient.custId,
        queryType: "U",
      })
        .then((res) => {
          this.payClientLoading = false;
          let { code, data } = res;
          if (code === 0) {
            let payClientObj = JSON.parse(JSON.stringify(this.payClient));
            payClientObj.totalBalance = data.totalBalance;
            payClientObj.blockedBalances = data.blockedBalances;
            payClientObj.totalTopUp = data.totalTopUp;
            payClientObj.totalGiveMoney = data.totalGiveMoney;

            payClientObj.usablePrincipal = data.usablePrincipal;
            payClientObj.aggregateUsableGive = data.aggregateUsableGive;
            payClientObj.blockedBalances = data.blockedBalances;

            this.payClient = payClientObj;
          }
        })
        .catch(() => {
          this.payClientLoading = false;
        });

      this.getClinerCard(this.payClient.custId);
    },

    clientInfoChange() {
      this.getClinerCard(this.payClient.custId);
      this.getPayClient();
    },

    getClinerCard(custId) {
      console.log(custId);
      this.clinerCardLoading = true;

      if (!custId) {
        this.$message.error("客户信息不能为空");
        return false;
      }

      getMemberCard({ customerId: custId, queryType: "U" })
        .then((res) => {
          this.clinerCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            let NewArry = [];
            if (data.length > 0) {
              // const { storesItem } = this.userInfo;

              for (let i = 0; i < data.length; i++) {
                let Item = data[i];
                // if (Item.storeId === storesItem.id) {
                //   this.isHaveCard = true;
                //   Item.haveCard = true;
                // }
                Item.active = false;
                NewArry.push(Item);
              }
            }
            this.MemberCardList = NewArry;
          }
        })
        .catch((err) => {
          this.clinerCardLoading = false;
        });
    },

    // 解冻
    userCardUpdateThaw(item) {
      this.$msgbox({
        title: "提示",
        message: "确定要解冻该会员卡吗？",
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";

            cardUpdateThaw({
              cardId: item.id,
            })
              .then((res) => {
                const { code, data } = res;
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
                if (code === 0) {
                  done();
                  this.getClinerCard(this.payClient.custId);
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.getPayClient();
                }
              })
              .catch((err) => {
                instance.confirmButtonLoading = false;
                instance.confirmButtonText = "确定";
              });
          } else {
            done();
          }
        },
      }).then((action) => {});
    },

    changeCardUser(item, index) {
      this.MemberCardList[index].active = !this.MemberCardList[index].active;
      this.settleAccountsObj.moneyMember = 0;
    },

    settleAccountsCancle() {
      this.settleAccountsVis = false;
      this.cacleSettleAccounts();
    },

    cacleSettleAccounts(OrderInStoreType) {
      this.settleAccountsObj = {
        moneyMember: 0,
        moneyPos: 0,
        moneyRmb: 0,
        moneyWx: 0,
        moneyZfb: 0,
        orderId: 0,
        OrderInStoreType: !!OrderInStoreType ? OrderInStoreType : "",
        OrderCustType: "",
        payList: [],
      };

      this.payClient = {};
      this.payClientLoading = false;

      this.clinerCardLoading = false;
      this.MemberCardList = [];

      this.settleAccountsPayList = [];

      this.settleAccountsPayTotalData = {
        a: "0.00", //  订单金额
        b: "0.00", // 优惠金额
        Ab: 0,
        c: "0.00", // 抵扣金额,
        Ac: 0,
        d: "0.00", // 应收金额
        e: "0.00", // 实收金额
        f: "0.00", // 待收金额
        j: "0.00", // 本次结算
      };
      this.multipleSelection = [];
      this.orderPayLoading = false;
    },

    // 添加优惠
    preferentialItemOpen(row, index) {
      this.preferentialItemObj.index = index;
      this.preferentialItemObj.MaxNumber = row.serverCount;
      this.preferentialItemObj.itemId = row.contentId;
      this.preferentialItemObj.bfb = 0;
      this.preferentialItemObj.serverPriceSum = row.serverPriceSum;
      this.preferentialItemObj.contentType = row.contentType;

      this.preferentialItemVis = true;
    },

    preferentialItemCancle() {
      this.resetFormData("preferentialItemForm");
      this.$nextTick(() => {
        this.preferentialItemVis = false;
        this.preferentialItemLoading = false;
      });
    },

    preferentialItemSave() {
      if (this.preferentialItemLoading) {
        return false;
      }

      this.$refs["preferentialItemForm"].validate((valid) => {
        if (valid) {
          const pitem = JSON.parse(JSON.stringify(this.preferentialItemObj));
          const {
            index,
            moneyCardCount,
            moneyCardId,
            preMoney,
            preType,
            bfb,
            minorCardNoList,
            realMoney,
          } = pitem;
          let obj = !!this.settleAccountsPayList[index]
            ? JSON.parse(JSON.stringify(this.settleAccountsPayList[index]))
            : {};

          obj.moneyCardCount = "";
          obj.moneyCardId = "";
          obj.preType = preType;
          obj.minorCardNoList = minorCardNoList;
          obj.realMoney = "";

          if (preType === "C") {
            obj.moneyCardCount = moneyCardCount;
            obj.moneyCardId = moneyCardId;

            let CardObj = this.moneyCardArryObj[moneyCardId];

            if (CardObj && CardObj.itemId === this.preferentialItemObj.itemId) {
              obj.preMoney = Number(obj.serverPrice);
            } else if (!!CardObj) {
              if (CardObj.itemMoney > Number(obj.serverPrice)) {
                obj.preMoney = Number(obj.serverPrice);
              } else {
                obj.preMoney = CardObj.itemMoney;
              }
            }

            // obj.preMoney = (
            //   Number(obj.serverPrice) * Number(moneyCardCount)
            // ).toFixed(2);
          } else if (preType === "L") {
            obj.moneyCardId = moneyCardId;
            obj.moneyCardCount = moneyCardCount;
            obj.realMoney = realMoney;
            obj.preMoney = Number(preMoney).toFixed(2);
          } else if (preType === "M") {
            obj.preMoney = Number(preMoney).toFixed(2);
          } else if (preType === "P") {
            let preMoneys = (
              (Number(obj.serverPriceSum) * Number(bfb)) /
              100
            ).toFixed(3);

            obj.preMoney = (Math.floor(Number(preMoneys) * 100) / 100).toFixed(
              2
            );
          }
          obj.isYh = true;

          this.$set(
            this.settleAccountsPayList[index],
            "realMoney",
            obj.realMoney
          );

          this.$set(
            this.settleAccountsPayList[index],
            "preMoney",
            obj.preMoney
          );

          this.$set(
            this.settleAccountsPayList[index],
            "moneyCardCount",
            obj.moneyCardCount
          );
          this.$set(
            this.settleAccountsPayList[index],
            "moneyCardId",
            obj.moneyCardId
          );

          this.$set(this.settleAccountsPayList[index], "preType", obj.preType);

          this.$set(this.settleAccountsPayList[index], "isYh", obj.isYh);
          this.$set(
            this.settleAccountsPayList[index],
            "minorCardNoList",
            obj.minorCardNoList
          );

          this.$nextTick(() => {
            // let array = this.multipleSelection.map((item) => {
            //   return this.settleAccountsPayObj[item.serverId];
            // });
            // console.log("112", array[0], this.settleAccountsPayList[0]);
            // for (let index = 0; index < array.length; index++) {
            //   const element = array[index];
            //   this.$refs.roomGoodsDTable.setCurrentRow(
            //     this.settleAccountsPayList[element.index]
            //   );
            // }
            // console.log("112");
            this.preferentialItemCancle();
            this.changePayList();
            this.totalJieshuanItem();

            this.settleAccountsObj.moneyRmb = 0;
            this.settleAccountsObj.moneyWx = 0;
            this.settleAccountsObj.moneyZfb = 0;
            this.settleAccountsObj.moneyPos = 0;
            this.settleAccountsObj.moneyMember = 0;
          });
        } else {
          return false;
        }
      });
    },

    preTypeChange() {
      this.preferentialItemObj.moneyCardCount = 0;
      this.preferentialItemObj.moneyCardId = "";
      this.preferentialItemObj.preMoney = "";
      this.preferentialItemObj.bfb = 0;

      // this.moneyCardArry = [];
      this.preferentialItemObj.minorCardNoList = [];

      this.$nextTick(() => {
        if (this.preferentialItemObj.preType === "C") {
          this.preferentialItemObj.moneyCardCount = 1;
          this.getAllMoneyCard();
        } else if (this.preferentialItemObj.preType === "L") {
          this.getCardTypes();
        }
      });
    },

    getAllMoneyCard() {
      this.moneyCardLoading = true;
      // getMinorCardListByItemId({
      //   itemId: this.preferentialItemObj.itemId,
      // })
      //   .then((res) => {
      //     this.moneyCardLoading = false;
      //     const { code, data } = res;
      //     if (code === 0) {
      //       this.moneyCardArry = data;
      //     }
      //   })
      //   .catch((err) => {
      //     this.moneyCardLoading = false;
      //   });
      getMemberCard({
        customerId: this.payClient.custId,
        queryType: "U",
        cardType: "C",
      })
        .then((res) => {
          this.moneyCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.moneyCardArry = data;
            let moneyCardArryObj = {};
            for (let index = 0; index < data.length; index++) {
              const element = data[index];
              moneyCardArryObj[element.id] = element;
            }

            this.moneyCardArryObj = moneyCardArryObj;
          }
        })
        .catch((err) => {
          this.moneyCardLoading = false;
        });
    },

    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item);
      this.totalJieshuanItem();
    },

    totalJieshuanItem() {
      let array = this.multipleSelection.map((item) => {
        return this.settleAccountsPayObj[item.serverId];
      });

      let b = 0;
      let c = 0;
      let d = 0;
      let realMoney = 0; // 团购实付金额
      let PreMoney = 0; // 团购优惠金额

      let maxMoney = 0;
      let contentId = "";
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        console.log(element);
        maxMoney += Number(element.serverPriceSum) - Number(element.preMoney);
        contentId = element.contentId;
      }
      this.contentId = contentId;

      for (let index = 0; index < this.settleAccountsPayList.length; index++) {
        const element = this.settleAccountsPayList[index];

        if (element.payStatus === "N") {
          if (element.preType === "P" || element.preType === "M") {
            b += Number(element.preMoney);
          }

          if (element.preType === "C") {
            c += Number(element.preMoney);
          }

          if (element.preType === "L") {
            realMoney += Number(element.realMoney);
            PreMoney += Number(element.preMoney);
          }
        }

        if (element.payStatus === "N") {
          d += Number(element.serverPriceSum) - Number(element.preMoney);
        } else if (element.payStatus === "Y") {
          d += Number(element.serverPriceSum);

          if (element.preType === "L") {
            realMoney += Number(element.realPrice);
            PreMoney += Number(element.prePrice);
          }
        }
      }

      this.settleAccountsObj.moneyChannelReal = Number(realMoney.toFixed(2));
      this.settleAccountsPayTotalData.k = Number(PreMoney.toFixed(2));

      const totalData = JSON.parse(
        JSON.stringify(this.settleAccountsPayTotalData)
      );

      this.settleAccountsPayTotalData["b"] = (Number(totalData.Ab) + b).toFixed(
        2
      );
      this.settleAccountsPayTotalData["c"] = (Number(totalData.Ac) + c).toFixed(
        2
      );
      this.settleAccountsPayTotalData["d"] = d.toFixed(2);
      this.settleAccountsPayTotalData["f"] = (
        Number(totalData.a) -
        Number(this.settleAccountsPayTotalData["b"]) -
        Number(this.settleAccountsPayTotalData["c"]) -
        Number(this.settleAccountsPayTotalData["k"]) -
        Number(totalData.e)
      ).toFixed(2);
      this.settleAccountsPayTotalData["j"] = maxMoney.toFixed(2);
    },

    getMinorCardNo(list) {
      return list.map((item) => {
        return item.value;
      });
    },

    goOrderPay() {
      if (this.orderPayLoading) {
        return false;
      }

      let array = this.multipleSelection.map((item) => {
        return this.settleAccountsPayObj[item.serverId];
      });

      let payList = array.map((item) => {
        return {
          moneyCardCount:
            item.moneyCardCount === null || item.moneyCardCount === undefined
              ? ""
              : item.moneyCardCount,
          moneyCardId:
            item.moneyCardId === null || item.moneyCardId === undefined
              ? ""
              : item.moneyCardId,
          preMoney:
            item.preMoney === null || item.preMoney === undefined
              ? ""
              : item.preMoney,
          preType:
            item.preType === null || item.preType === undefined
              ? ""
              : item.preType,
          serverId: item.serverId,
          minorCardNo: !!item.minorCardNoList
            ? this.getMinorCardNo(item.minorCardNoList)
            : [],

          realMoney: item.realMoney,
        };
      });

      let queryData = JSON.parse(JSON.stringify(this.settleAccountsObj));
      queryData.payList = payList;

      if (payList.length === 0 && this.settleAccountsPayList.length !== 0) {
        this.$message.warning("请选择结账项目/商品");
        return false;
      }

      if (!this.settleAccountsObj.OrderInStoreType) {
        this.$message.warning("请选择进店方式");
        return false;
      }

      if (!this.settleAccountsObj.OrderCustType) {
        this.$message.warning("请选择客户类型");
        return false;
      }

      queryData.inStoreType = this.settleAccountsObj.OrderInStoreType;
      queryData.custType = this.settleAccountsObj.OrderCustType;
      delete queryData.OrderCustType;
      delete queryData.OrderInStoreType;

      // if (!queryData.custId) {
      //   this.$message.warning("请选择客户");
      //   return false;
      // }

      if (
        this.yueCardIds.length > 0 &&
        Number(this.moneyMember) > Number(this.yueTotal)
      ) {
        this.$message.warning("余额收款不得超过会员卡合计余额");
        return false;
      }

      let TotalNumber = 0;
      const { moneyRmb, moneyWx, moneyZfb, moneyMember, moneyPos } =
        this.settleAccountsObj;
      TotalNumber += Number(!!moneyRmb ? moneyRmb : 0);
      TotalNumber += Number(!!moneyWx ? moneyWx : 0);
      TotalNumber += Number(!!moneyZfb ? moneyZfb : 0);
      TotalNumber += Number(!!moneyMember ? moneyMember : 0);
      TotalNumber += Number(!!moneyPos ? moneyPos : 0);
      if (TotalNumber !== Number(this.settleAccountsPayTotalData.j)) {
        this.$message.warning("支付金额与结算金额不一致");
        return false;
      }

      // console.log("a", payList);
      let isCard = false;
      for (let i = 0; i < payList.length; i++) {
        let item = payList[i];
        if (item.preType === "C") {
          isCard = true;
        }
      }

      if (this.yueCardIds.length > 0 || isCard) {
        this.openPayPassword(queryData);
      } else if (this.yueCardIds.length === 0) {
        this.zhifu(queryData);
      }
    },

    // 打开消费密码弹框
    openPayPassword(queryData) {
      let payPasswordItem = JSON.parse(JSON.stringify(queryData));
      payPasswordItem.cardPassword = "";
      this.payPasswordItem = payPasswordItem;
      this.payPasswordItemLoading = false;
      this.$nextTick(() => {
        this.payPasswordItemVis = true;

        this.$nextTick(() => {
          this.$refs.payPassword.focus();
        });
      });
    },

    payPasswordItemCancle() {
      this.resetFormData("payPasswordItemForm");
      this.$nextTick(() => {
        this.payPasswordItemVis = false;
        this.payPasswordItemLoading = false;
      });
    },

    payPasswordItemSave() {
      if (this.payPasswordItemLoading) {
        return false;
      }

      this.$refs["payPasswordItemForm"].validate((valid) => {
        if (valid) {
          this.payPasswordItemLoading = true;

          const { cardPassword, ...other } = this.payPasswordItem;

          this.zhifu(this.payPasswordItem);

          // orderSweepm(this.sweepmRoomItemObj)
          //   .then((res) => {
          //     this.payPasswordItemLoading = false;
          //     let { code, msg } = res;
          //     if (code === 0) {
          //       this.$message.success("密码验证通过");
          //  this.zhifu(queryData);
          //       this.payPasswordItemCancle(other);
          //     }
          //   })
          //   .catch(() => {
          //     this.payPasswordItemLoading = false;
          //   });
        } else {
          return false;
        }
      });
    },

    zhifu(queryData) {
      this.orderPayLoading = true;
      delete queryData.custId;

      orderPay({ cardIds: this.yueCardIds, ...queryData })
        .then((res) => {
          this.orderPayLoading = false;
          this.payPasswordItemLoading = false;
          let { code, msg } = res;
          if (code === 0) {
            this.getbyOrderIdRom(this.curRoomData.orderId);
            this.getRoomList();
            this.$message.success("操作成功");
            this.settleAccountsCancle();
            this.payPasswordItemCancle();
            this.payPasswordItem.cardPassword = "";
          }
        })
        .catch(() => {
          this.orderPayLoading = false;
          this.payPasswordItemLoading = false;
        });
    },

    addCardOpen() {
      this.OpenCarddialogVisible = true;
    },

    OpenClientCard() {
      this.$refs.clientInfo.OpenCard({ id: this.payClient.custId });
      this.$refs.clientInfo.RechargeSubmit();
    },

    pickClientOpen() {
      if (!!this.curRoomData.orderId) {
        this.pickClientItemObj.orderId = this.curRoomData.orderId;
        this.pickClientItemVis = true;
        this.hanldeClientList();
      }
    },

    hanldeClientList() {
      this.useStoreParams.pageNo = 1;
      this.getClientList();
    },

    handleCkientQuery() {
      this.useStoreParams.pageNo = 1;
      this.getClientList();
    },

    hanldeAddClient() {
      this.$refs.newClient.open();
    },

    getClientList() {
      this.clinetLoading = true;
      getAvailableClientList(this.useStoreParams)
        .then((res) => {
          this.clinetLoading = false;
          const { code, data } = res;
          if (code === 0) {
            let clinetArry = data.list;
            this.total = data.total;
            let clinetArryObj = {};

            for (let index = 0; index < clinetArry.length; index++) {
              let item = clinetArry[index];
              clinetArryObj[item.id] = item;
            }

            this.clinetArry = clinetArry;
            this.clinetArryObj = clinetArryObj;
            // this.pickClientItemObj.total = data.total;
          }
        })
        .catch((err) => {
          this.clinetLoading = false;
        });
    },

    pickClientItemCancle() {
      this.pickClientItemObj = {
        custName: "",
        orderId: "",
        custId: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      };
      this.useStoreParams.keyword = "";
      this.$nextTick(() => {
        this.pickClientItemVis = false;
        this.pickClientItemLoading = false;
      });
    },

    pickClientItemSave() {
      if (this.pickClientItemLoading) {
        return false;
      }

      if (!this.pickClientItemObj.custId) {
        this.$message.warning("请选择客户");
        return false;
      }

      this.pickClientItemLoading = true;

      orderCustom({
        custId: this.pickClientItemObj.custId,
        orderId: this.pickClientItemObj.orderId,
      })
        .then((res) => {
          this.pickClientItemLoading = false;
          let { code, msg } = res;
          if (code === 0) {
            if (!!this.settleAccountsVis) {
              let clientObj = this.clinetArryObj[this.pickClientItemObj.custId];

              this.payClient = {
                custId: this.pickClientItemObj.custId,
                custName: clientObj.name,
                custMobile: clientObj.mobile,
                custMobile2: clientObj.mobile2,
                custHeadPortrait: clientObj.headPortrait,
              };

              this.settleAccountsObj.custId = this.pickClientItemObj.custId;
              this.getPayClient();
            }
            this.getbyOrderIdRom(this.curRoomData.orderId);

            this.pickClientItemCancle();
          }
        })
        .catch(() => {
          this.pickClientItemLoading = false;
        });
    },

    clickOrderSweepm(status) {
      if (status === 2) {
        this.roomStatusArry = [
          {
            label: "空闲",
            value: 0,
          },
          {
            label: "维修",
            value: 4,
          },
        ];
      } else if (status === 4) {
        this.roomStatusArry = [
          {
            label: "空闲",
            value: 0,
          },
          {
            label: "打扫",
            value: 2,
          },
        ];
      }

      this.sweepmRoomItemObj.roomId = this.curRoomData.roomId;
      this.sweepmRoomItemVis = true;
      this.sweepmRoomItemObj.roomStatus = 0;
    },

    sweepmRoomItemCancle() {
      this.resetFormData("sweepmRoomItemForm");
      this.$nextTick(() => {
        this.sweepmRoomItemVis = false;
        this.sweepmRoomItemLoading = false;
      });
    },

    sweepmRoomItemSave() {
      if (this.sweepmRoomItemLoading) {
        return false;
      }

      this.$refs["sweepmRoomItemForm"].validate((valid) => {
        if (valid) {
          this.sweepmRoomItemLoading = true;

          orderSweepm(this.sweepmRoomItemObj)
            .then((res) => {
              this.sweepmRoomItemLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.curRoomData = {};
                this.getRoomList();
                this.$message.success("操作成功");
                this.sweepmRoomItemCancle();
              }
            })
            .catch(() => {
              this.sweepmRoomItemLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 更多消费

    handleCommand(command) {
      if (command === "a") {
        this.mergeRoomMorCItrem();
      } else if (command === "c") {
        this.changeRoomMorCItrem();
      } else if (command === "b") {
        this.roomSplit();
      }
    },

    // 联房
    mergeRoomMorCItrem() {
      this.roomMorCItremTitle = "联房";
      this.roomMorCItremObj.changeType = 1;
      this.roomMorCItremObj.roomIds = [];
      this.roomMorCItremRoomList = this.getMergePermit();
      this.openRoomMorCItrem();
      this.getSplitRoomList();
    },
    //换房
    changeRoomMorCItrem() {
      this.roomMorCItremTitle = "换房";
      this.roomMorCItremVis = false;
      this.RoomChangedialogVisible = false;
      this.roomMorCItremObj.changeType = 2;
      this.roomMorCItremObj.roomIds = "";
      this.roomMorCItremObj.roomId = this.curRoomData.roomId;
      this.roomMorCItremRoomList = this.getOpenRoomList(0);
      this.openRoomMorCItrem();
    },

    getMergePermit() {
      this.roomMorCItremRoomList = [];
      this.roomMorCItremLoading = true;
      mergePermit()
        .then((res) => {
          this.roomMorCItremLoading = false;
          let { code, data } = res;
          if (code === 0) {
            this.roomMorCItremRoomList = data;
          }
        })
        .catch(() => {
          this.roomMorCItremLoading = false;
        });
    },

    openRoomMorCItrem() {
      this.$nextTick(() => {
        this.roomMorCItremVis = true;
      });
    },

    roomMorCItremCancle() {
      this.resetFormData("roomMorCItremForm");
      this.roomMorCItremRoomList = [];
      this.$nextTick(() => {
        this.roomMorCItremVis = false;
        this.roomMorCItremLoading = false;
      });
    },

    roomMorCItremSave() {
      const { roomIds, splitOrderId, changeType } = this.roomMorCItremObj;
      if (
        !!roomIds &&
        roomIds.length === 0 &&
        !splitOrderId &&
        changeType === 1
      ) {
        this.$message.error("请选择联房或拆房房间");
        return false;
      }

      if (
        !!roomIds &&
        roomIds.length === 0 &&
        !splitOrderId &&
        changeType === 2
      ) {
        this.$message.error("请选择换房或拆房房间");
        return false;
      }

      if (this.roomMorCItremLoading) {
        return false;
      }

      this.$refs["roomMorCItremForm"].validate((valid) => {
        if (valid) {
          this.roomMorCItremLoading = true;
          if (this.roomMorCItremObj.changeType === 1) {
            if (!!roomIds && roomIds.length > 0) {
              this.roomOrderMerge();
            } else if (!!splitOrderId) {
              this.roomSplit(splitOrderId);
            }
          } else if (this.roomMorCItremObj.changeType === 2) {
            this.roomOrderChange();
          }
        } else {
          return false;
        }
      });
    },

    roomOrderMerge() {
      let roomMorCItremObjCopy = JSON.parse(
        JSON.stringify(this.roomMorCItremObj)
      );
      let { roomIds } = roomMorCItremObjCopy;

      orderMerge({
        roomIds: roomIds,
      })
        .then((res) => {
          this.roomMorCItremLoading = false;
          let { code, msg } = res;
          if (code === 0) {
            this.getRoomList();
            this.$message.success("操作成功");
            this.roomMorCItremCancle();
          }
        })
        .catch(() => {
          this.roomMorCItremLoading = false;
        });
    },

    roomOrderChange() {
      let { roomIds, roomId } = this.roomMorCItremObj;

      orderExchangeRoom({
        roomIdOld: roomId,
        roomIdNew: roomIds,
      })
        .then((res) => {
          this.roomMorCItremLoading = false;
          let { code, msg } = res;
          if (code === 0) {
            this.getRoomList();
            this.$message.success("操作成功");
            this.roomMorCItremCancle();
          }
        })
        .catch(() => {
          this.roomMorCItremLoading = false;
        });
    },

    // 拆房
    roomSplit(splitOrderId) {
      orderSplit({
        orderId: splitOrderId,
      })
        .then((res) => {
          this.roomMorCItremLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.getRoomList();
            this.roomMorCItremCancle();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        })
        .catch((err) => {
          this.roomMorCItremLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.cur-main-box {
  background-color: #fff;
  position: relative;
  &.left {
    margin-right: 20px;
  }
  .seach-fixed {
    position: sticky;
    width: 100%;
    left: 0px;
    right: 0px;
    padding: 16px 10px;
    background: #fff;

    .seach-nav {
      background-color: #f9f9f9;
    }
  }
}

.cur-main-nav {
  padding: 0px 0px 0px 20px;
  background-color: #fff;
}

.left-nav-center {
  padding: 0px 10px;
  overflow-y: auto;
  // height: calc(100vh - 400px);
  flex-wrap: wrap;
  width: 100%;
  .room-list {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
  }
  .room-item {
    // width: 100%;
    // height: 140px;
    width: 208px;
    height: 130px;
    // border: solid 1px #d5d5d5;
    box-sizing: border-box;
    // border-radius: 6px;
    // padding: 24px;
    border-radius: 4px;
    background-color: rgb(232, 243, 255);
    // margin-bottom: 24px;
    // margin: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 10px;
    position: relative;
    margin-right: 10px;
    .room-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 20px;
    }

    .room-tag {
      // margin-top: 12px;
      // font-size: 12px;

      font-size: 15px;
      // margin: 0px 0px 8px 8px;
      color: rgb(96, 98, 102);
      margin-top: 8px;
    }

    .countNum {
      width: 58px;
      height: 73px;
      line-height: 73px;
      text-align: center;
      color: rgb(255, 255, 255);
      font-size: 64px;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .room-status {
      .status-block {
        margin-top: 12px;
        width: 64px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #fff;
        border-radius: 18px;
        &.a {
          background-color: #76db52;
        }

        &.b {
          background-color: #ff6a00;
        }

        &.c {
          background-color: #ff4040;
        }

        &.d {
          background-color: #999999;
        }
      }
    }
    &.ServerActive {
      background: #d87a80;
    }

    &.clean {
      background-color: #e0a370;
    }
    &.helper {
      background-color: #bababa;
    }
  }
}

.right-nav-center {
  .title {
    height: 64px;
    line-height: 64px;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 24px;
    border-bottom: solid 1px #d5d5d5;
  }
  .r-n-c {
    padding: 24px;

    .rome-name {
      display: flex;
      align-items: center;
      .rome-status {
        margin-left: 12px;
        width: 54px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: #fff;

        &.a {
          background-color: #76db52;
        }

        &.b {
          background-color: #ff6a00;
        }

        &.c {
          background-color: #ff4040;
        }

        &.d {
          background-color: #999999;
        }
      }
    }

    .rome-no {
      margin-top: 14px;
      color: #333;
    }

    .small-text {
      margin-top: 12px;
      color: #666;
    }
  }
}

.flex-sp {
  display: flex;
  justify-content: space-between;
}

.rome-shop-list {
  height: calc(100vh - 442px);
  width: 100%;
  overflow: auto;
  .shop-list-head {
    padding: 20px;
    font-size: 16px;
    color: #000;
    border-top: solid 1px #e4e4e4;
    border-bottom: solid 1px #e4e4e4;
  }

  .shop-list-item {
    padding: 20px;
    border-bottom: solid 1px #e4e4e4;
    .item-head {
      position: relative;
      padding-right: 46px;
      .item-type {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 46px;
        height: 30px;
      }
    }

    .item-center {
      margin-top: 12px;
      .row-list {
        margin-bottom: 8px;
      }
    }
  }
}
.rome-bottom {
  width: 100%;
  height: 66px;
  border-top: solid 1px #e4e4e4;
  display: flex;
  justify-content: flex-end;
  position: relative;
  .more-op {
    position: absolute;
    left: 12px;
    font-size: 14px;
    top: 50%;
    margin-top: -18px;
  }

  .rome-status-but {
    height: 66px;
    line-height: 66px;
    color: #fff;
    width: 140px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    &.a {
      background: #0079fe;
    }

    &.b {
      background: #ff6a00;
    }

    &.c {
      background: #ff4040;
    }

    &.d {
      background: #999999;
    }
  }
}

.add {
  .item-list {
    height: 400px;
    overflow: auto;
    .item-list-row {
      width: 100%;
      overflow: hidden;
    }
    .item-xf {
      height: 98px;
      background-color: #f7f8fa;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 24px;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
      .item-name {
        font-size: 16px;
        font-weight: bold;
      }

      .item-price {
        font-size: 12px;
        margin-top: 12px;
      }
    }
  }

  .right-ck-list {
    padding-top: 40px;
    .ck-price {
      color: #ff4040;
      font-size: 14px;
    }

    .right-ck-bootom {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.room-goods-list {
  padding-left: 30px;
  border-left: solid 1px #e4e4e4;
}

.pay-type-list {
  padding-top: 12px;
}

.pay-total-style {
  position: relative;
  min-height: 72px;
  padding-right: 158px;
  font-size: 0px;
  .pay-total-list {
    border-top: solid 1px #e4e4e4;
    border-left: solid 1px #e4e4e4;
    width: 100%;
    display: inline-block;
    .pay-total-item {
      height: 36px;
      line-height: 36px;
      float: left;
      font-size: 14px;
      width: 12.5%;
      text-align: center;
      box-sizing: border-box;
      border-right: solid 1px #e4e4e4;
      border-bottom: solid 1px #e4e4e4;
    }
  }
  .pay-but-style {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 72px;

    width: 140px;
    text-align: center;
    background-color: #0079fe;
    border-radius: 4px;
    color: #fff;
    font-size: 32px;
  }
}

.pay-user {
  padding-right: 30px;

  .pay-user-msg {
    width: 100%;
    height: 220px;
    background-color: #f7f8fa;
    border-radius: 4px;

    .none {
      display: flex;
      justify-content: center;
      height: 220px;
      align-items: center;
    }
  }

  .pay-user-card {
    width: 100%;
    // height: 360px;
    background-color: #f7f8fa;
    border-radius: 4px;
    margin-top: 18px;
    padding: 24px;
  }

  .pay-client {
    .pay-client-head {
      position: relative;
      padding: 24px;
      padding-left: 104px;
      border-bottom: solid 1px #e4e4e4;
      .client-av {
        position: absolute;
        top: 24px;
        left: 24px;
      }

      .clientAction {
        width: 100%;
        display: flex;
        align-items: center;
        .replacement {
          padding: 10px 10px;
          border-radius: 3px;
          background-color: #0052d9;
          color: #fff;
          font-size: 12px;
          margin-left: 63px;
          position: absolute;
          right: 13px;
          top: 27px;
        }
      }

      .clinet-name {
        font-size: 18px;
        padding: 4px 0px;
        color: #000;
      }
    }

    .y-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .y-nav {
      padding: 12px 12px;

      .y-count {
        font-size: #000;
        font-size: 28px;
        font-weight: bold;
        padding: 4px 0px;
      }

      .y-total {
        margin-top: 8px;
        span {
          margin-right: 6px;
        }
      }
    }
  }
}

.total-item {
  color: #666;
  padding: 12px 0px;
}

.clientAddUserName {
  margin-bottom: 12px;
}

.pick-clent-center {
  margin-top: 24px;
}

.pick-clien-style {
  .pick-client-head {
    display: flex;
    justify-content: space-between;
    .input-left {
      width: 300px;
      position: relative;
      padding-right: 80px;
      .but {
        position: absolute;
        top: 0px;
        right: 0px;
      }
    }
  }

  .table-head {
    padding-left: 80px;
    height: 48px;
    background-color: #f7f8fa;
    line-height: 48px;
    font-size: 12px;
  }

  .pick-item-list {
    max-height: 500px;
    overflow-y: auto;
    .pick-item-style {
      border-bottom: solid 1px #f2f2f2;
      padding: 20px 0px 20px 36px;
    }
    .pick-item-center {
      width: 100%;
      display: flex;
      align-items: center;

      .user-style {
        font-size: 14px;

        .user-name {
          color: #3b98fe;
        }

        .span_small {
          font-size: 12px;
          color: #999999;
          margin-top: 8px;
        }
      }
    }
  }
}

.f-zero {
  font-size: 0px;
}

.member_info_content {
  .content_box {
    background: #ffffff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
    border-radius: 4px;
    margin-bottom: 20px;

    .style1 {
      display: flex;
      height: 160px;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 400;
      color: #0052d9;
      img {
        width: 48px;
        height: 48px;
        display: block;
        margin: 0 auto;
      }
    }

    .style2 {
      height: 160px;
      position: relative;
      .ey_top {
        min-width: 120px;
        padding: 0 7px;
        height: 32px;
        line-height: 32px;
        background: #0052d9;
        border-radius: 3px 0px 8px 0px;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        position: absolute;
        top: 0px;
        left: 0px;
        &.dis {
          background: #e4e4e4;
        }
      }
      .expiration_date {
        height: 32px;
        line-height: 32px;
        background: #ffffff;
        padding-right: 12px;
        border-radius: 4px;
        text-align: right;
      }

      .my_wallet {
        position: relative;
        .my_wallet_left {
          margin-top: 13px;
          margin-left: 12px;
          .rest_wallet {
            font-size: 24px;
            font-weight: 400;
            color: #000000;
          }
          .balance_text {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            margin-top: 8px;
            margin-bottom: 12px;
          }
        }
        .my_wallet_right {
          position: absolute;
          top: 10px;
          right: 12px;
          img {
            width: 49px;
            height: 48px;
          }
        }
      }

      .bottom_content {
        height: 48px;
        background: #f7f9fa;
        border-radius: 0px 0px 4px 4px;
        border: 1px solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0052d9;
        font-size: 14px;
        padding-left: 12px;
        .recharge_btn {
          padding-left: 12px;
        }
        .center_solid {
          width: 1px;
          height: 16px;
          line-height: 16px;
          background: #e8e8e8;
        }
        .select_box {
          margin-right: 25px;
          width: 96px;
          height: 37px;
          border-radius: 3px;
          border: 1px solid #0052d9;
          text-align: center;
          line-height: 37px;
          .select_text {
            color: #0052d9;
          }
        }
      }
    }
  }
}

.pick-room-list {
  font-size: 0px;

  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  .pick-room-item {
    display: inline-block;
    margin-right: 8px;
    line-height: 24px;
    border: solid 1px #666;
    border-radius: 4px;
    padding: 0px 6px;
    font-size: 12px;
    color: #666;

    &.ac {
      border: solid 1px #67c23a;
      color: #fff;
      background-color: #67c23a;
    }

    &.active {
      border: solid 1px #67c23a;
      color: #67c23a;
      background-color: #e1f3d8;
    }
  }
}

.el-dropdown-link {
  line-height: 36px;
}

.client-card-list {
  padding-top: 10px;
}

.topBox {
  display: flex;
  background-color: #fff;
  .roomManger {
    padding: 24px 0;
    background-color: #fff;
    .roomTop {
      display: flex;
      .floor {
        margin-left: 20px;
      }
    }
    .roomBottom {
      display: flex;
      margin-top: 20px;
      .roomsBeds {
        margin-left: 20px;
      }
    }
  }

  .actionBtn {
    display: flex;
    padding: 24px;
    background-color: #fff;
    margin-left: 100px;
    div {
      margin-right: 15px;
    }
  }
}

.scheduling {
  padding: 0 10px;
  .scheduling-area {
    width: 100%;
    // min-height: 300px;
    margin-top: 20px;
    border-top: 10px solid #f0f2f5;
  }
}

.actionBoxs {
  display: flex;
  align-items: center;
  .roomState {
    margin: 12px 10px;
  }

  .workCount {
    margin-left: 40px;
  }

  .searchBox {
    display: flex;
    margin-left: 125px;
    input {
      height: 30px;
      border-radius: 6px;
      border: 1px solid #e0e3e9;
      margin-right: 5px;
    }

    // .actionsBtn {
    //   color: #fff;
    //   background-color: #1890ff;
    //   border-color: #1890ff;
    //   font-size: 12px;
    //   padding: 7px 9px;
    //   margin-right: 5px;
    // }
  }
}

.TeachicanName {
  margin-bottom: 13px;
  font-size: 17px;
}

.bottom_desc {
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
  align-items: center;
  .bottom_left {
    display: flex;
    div {
      padding-right: 20px;
    }
  }
}

.teachicaTitle {
  font-weight: bold;
  font-size: 17px;
  margin-top: 20px;
}
.teachicanInfo {
  position: relative;
  background-color: #f7f8fa;
  padding: 10px;
  margin-top: 20px;
  overflow: hidden;

  .teachbox {
    display: flex;
    flex-wrap: wrap;
    margin-right: 40px;
    // flex-wrap: wrap;
  }

  .teachbox_item {
    cursor: pointer;
  }
  .descInfo {
    position: relative;
    margin: 10px;

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 0 auto;
      display: block;
    }
  }

  .userName {
    margin-top: 15px;
    text-align: center;
  }

  .userStatus {
    position: absolute;
    left: 50%;
    margin-left: -25px;
    bottom: -10px;
    background: #18b91e;
    width: 50px;
    height: 15px;
    line-height: 15px;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    &.upWork {
      background-color: #ff6a00;
    }
  }
}

.actshift {
  display: flex;
  justify-content: space-between;
  .actionsBtn {
    margin-top: 10px;
    margin-right: 10px;
  }
}

.teachbox_list {
  display: flex;
  flex-wrap: wrap;
}

.icons {
  display: flex;
  justify-content: space-between;
  .img_iconBoxs {
    display: flex;
    .img_icon {
      width: 30px;
      height: 30px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
